Flutter – Design Bus Booking App UI

Nowadays, android apps are very popular, especially travel-related apps. This Dashboard and Bus Seat Select UI has generally seen in the “Redbus” App. In this article, we will create a RedBus Dashboard and Bus Seat Select UI in Android Studio using Flutter. Below are the various steps on how to do it.

What will be the Final Output UI?

Dashboard and Bus seat book UI

Step-by-Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to Android Studio Setup for Flutter Development. Firstly select empty Flutter activity then click the next button. Give the name of your app like “Redbus UI”.

Step 2: Create the Dashboard UI

Create a folder named “widget” and in between that folder, you need to create another two .dart files. Assume the name of the two files is “ui_example_03-a.dart” and “ui_example_03.dart”. Then, Add this code in /widget/ui_example_03.dart

Dart

import 'package:flutter/material.dart';
import 'package:flutter_project_2/widget/List_Grid.dart';
import 'package:flutter_project_2/widget/alert.dart';
import 'package:flutter_project_2/widget/dismissible_flutter.dart';
import 'package:flutter_project_2/widget/ui_example_03-a.dart';

class Botton_Nav_Redbus extends StatefulWidget {
  const Botton_Nav_Redbus({Key? key}) : super(key: key);
  @override
  State<Botton_Nav_Redbus> createState() => _Botton_NavState();
}
class _Botton_NavState extends State<Botton_Nav_Redbus> {
  int selectedIndex = 0;
  PageController pageController = PageController();
  void OnTapped(int index){
    setState(() {
      selectedIndex = index;
    });
    pageController.jumpToPage(index);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [
          UIEX03Ft(),
          Dismissible_Widget(),
          List_Grid(),
          List_Grid()
        ],
      ) ,
      bottomNavigationBar: BottomNavigationBar(
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.menu),
              label: "Bookings"),
          BottomNavigationBarItem(
              icon: Icon(Icons.help),
              label: "Help"),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: "My Account")
        ],
        currentIndex: selectedIndex ,
        selectedItemColor: Color(0xffd44d57),
        unselectedItemColor: Colors.grey,
        onTap: OnTapped,
      ),
    );
  }
}

And then Then, Add this code in /widget//ui_example_03-a.dart

Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class UIEX03Ft extends StatefulWidget {
  const UIEX03Ft({Key? key}) : super(key: key);

  @override
  _UIEX03FtState createState() => _UIEX03FtState();
}
class _UIEX03FtState extends State<UIEX03Ft> {
  @override
  Widget build(BuildContext context) {
    var w = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xffd44d57),
      ),
      body: Column(
        children: [
          Stack(
            children: [
              Positioned(child: Container(
                color: Color(0xffd44d57),
                height: 320,
                width: w,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                        left: 10,
                        top: 20,
                        child: Text("Bus tickets",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white,fontSize: 22),)),
                    Positioned(
                        right: 10,
                        top: 10,
                        child: Container(
                          height: 50,
                          width: 50,
                          decoration: BoxDecoration(
                              image: DecorationImage(

                                  image: NetworkImage("https://play-lh.googleusercontent.com/5ZxVI65M9_yQQHgsY2f_lvSFD9E4Oqvfgxkg-E-MZwWt1M65-6HLY3twREAubQtZqqo"),fit: BoxFit.cover
                              ),
                              borderRadius: BorderRadius.circular(20)
                          ) ,
                        )),
                    Positioned(
                        top: 70,
                        child: Center(
                          child: Container(
                            alignment: Alignment.center,
                            width: w-20,
                            height: 220,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10)
                            ),
                            child: Stack(
                              children: [
                                Positioned(
                                    top: 20,
                                    left: 20,
                                    child: Container(
                                      child: Row(
                                        children: [
                                          Icon(Icons.business_outlined,size: 30,),
                                          SizedBox(
                                            width: 15,
                                          ),
                                          Text("Enter Source",style: TextStyle(fontSize: 18,color: Colors.grey),)
                                        ],
                                      ),
                                    )),
                                Positioned(
                                    top: 60,
                                    left: 20,
                                    child: Container(
                                      child: Row(
                                        children: [
                                          Icon(Icons.directions_bus,size: 30,),
                                          SizedBox(
                                            width: 15,
                                          ),
                                          Text("Enter Destination",style: TextStyle(fontSize: 18,color: Colors.grey),)
                                        ],
                                      ),
                                    )),
                                Positioned(
                                    top: 40,
                                    right: 20,
                                    child: Container(
                                      child: Icon(Icons.alt_route_rounded,size: 30,),
                                    )),
                                Positioned(
                                    top: 100,
                                    left: 20,
                                    child: Container(
                                      child: Row(
                                        children: [
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.center,
                                            crossAxisAlignment: CrossAxisAlignment.center,
                                            children: [
                                              Icon(Icons.calendar_today_outlined,size: 30,),
                                              SizedBox(
                                                width: 15,
                                              ),
                                              Text("Sun, 17 Apr",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.black),)
                                            ],
                                          ),
                                          SizedBox(
                                            width: 80,
                                          ),
                                          Row(
                                            children: [
                                              Text("Today",style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold,color: Colors.blueAccent),),
                                              SizedBox(
                                                width: 15,
                                              ),
                                              Text("Tomorrow",style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold,color: Colors.blueAccent))
                                            ],
                                          )
                                        ],
                                      ),
                                    )),
                                Positioned(
                                    top: 150,
                                    left: 20,
                                    right: 20,
                                    child: Container(
                                      height: 50,
                                      decoration: BoxDecoration(
                                          color: Color(0xffd44d57),
                                          borderRadius: BorderRadius.circular(20)
                                      ),
                                      child: Center(
                                          child: Text("SEARCH",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white,fontSize: 18),)
                                      ),
                                    )
                                )
                              ],
                            ),

                          ),
                        )),
                  ],
                ),
              ))
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text("You Can Also Book",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 18),),
          ),
          SizedBox(
            height: 12,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Card(
                elevation: 5,
                margin: EdgeInsets.all(10),
                child: Container(
                  width: 100,
                  margin: EdgeInsets.all(10),
                  child: Column(
                    children: [
                      Icon(Icons.bus_alert,color: Color(0xffd44d57),size: 40,),
                      SizedBox(
                        height: 10,
                      ),
                      Text("Cab/Bus Hire",style: TextStyle(fontSize: 16,color: Colors.grey),)
                    ],
                  ),
                ),
              ),
              Card(
                elevation: 5,
                margin: EdgeInsets.all(10),
                child: Container(
                  width: 100,
                  margin: EdgeInsets.all(10),
                  child: Column(
                    children: [
                      Icon(Icons.train,color: Color(0xffd44d57),size: 40,),
                      SizedBox(
                        height: 10,
                      ),
                      Text("Red Rail",style: TextStyle(fontSize: 16,color: Colors.grey),)
                    ],
                  ),
                ),
              )
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            alignment: Alignment.topLeft,
            margin: EdgeInsets.only(left: 20),
            child: Text("Return Trip",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 18),),
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            width: w-20,
            height: 70,
            child: Card(

              elevation: 5,
              child: Container(
                width: 20,
                margin: EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Jamnagar to Rajkot",style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold),),
                    TextButton(onPressed: (){}, child: Text("Book Now",style: TextStyle(fontSize: 15)))
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

And then, this is the final part, the modification of the main.dart file. Modify the main.dart file as this way

Dart

import 'package:flutter/material.dart';
import 'package:flutter_project_2/widget/List_Grid.dart';
import 'package:flutter_project_2/widget/image.dart';
import 'package:flutter_project_2/widget/ui_example_03-a.dart';
import 'package:flutter_project_2/widget/ui_example_03.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blue
      ),
      home: UiExample_04(),
    );
  }
}

In this way, you can generate the Dashboard UI of Redbus.

Step 3: Create the Bus Seat Select UI

Create a folder named “widget” and in between that folder, you need to create another .dart file. Assume the name of the two files is “/ui_example_05.dart”. Then, Add this code in /widget/ui_example_05.dart

Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class RedBusSeatUI extends StatefulWidget {
  const RedBusSeatUI({Key? key}) : super(key: key);

  @override
  _RedBusSeatUIState createState() => _RedBusSeatUIState();
}

class _RedBusSeatUIState extends State<RedBusSeatUI> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Zing Bus"),
        backgroundColor: Color(0xffd44d57),

      ),
      body: Container(
        child: Stack(
          children: [
            Positioned(
                top: 200,
                left: 100,
                child: Card(
                  elevation: 10,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                 child:
                 Container(
                   margin: EdgeInsets.all(12),
                   child: Column(
                     children: [
                       Row(
                         children: [

                           SizedBox(
                             width: 150,
                           ),
                           Icon(Icons.circle)
                         ],
                       ),
                       SizedBox(
                         height: 10,
                       ),
                       Row(
                         children: [
                           _Full_gents_seatLayout(),
                           _Full_gents_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Vacant_seatLayout(),
                           _Full_gents_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Full_ladies_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_gents_seatLayout(),
                           _Full_gents_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Full_ladies_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_gents_seatLayout(),
                           _Full_gents_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                          _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_gents_seatLayout(),
                           _Vacant_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Selected_Seat(),
                           _Full_gents_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Full_ladies_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_gents_seatLayout(),
                           _Full_gents_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Full_ladies_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_ladies_seatLayout(),
                           _Full_ladies_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                          _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           SizedBox(
                             width: 40,
                           ),
                           _Full_gents_seatLayout(),
                           _Vacant_seatLayout()
                         ],
                       ),
                       Row(
                         children: [
                           _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           _Vacant_seatLayout(),
                           _Vacant_seatLayout()
                         ],
                       )
                     ],
                   ),
                 ),
            )),

          ],
        ),
      ),
    );
  }

  Widget _Vacant_seatLayout(){
    return Container(
      width: 40,
      height: 40,
      child: Stack(
        children: [
          Positioned(
            top: 5,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white
                ),
              ),
            ),),
          Positioned(
            top: 29,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 4,
            right: 30,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 30,
            right: 4,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white
                ),
              ),
            ),)

        ],
      ),
    );
  }
  Widget _Full_gents_seatLayout(){
    return Container(
      width: 40,
      height: 40,
      child: Stack(
        children: [
          Positioned(
            top: 5,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.grey.shade300
                ),
              ),
            ),),
          Positioned(
            top: 29,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blueAccent
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 4,
            right: 30,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blueAccent
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 30,
            right: 4,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blueAccent
                ),
              ),
            ),)

        ],
      ),
    );
  }
  Widget _Full_ladies_seatLayout(){
    return Container(
      width: 40,
      height: 40,
      child: Stack(
        children: [
          Positioned(
            top: 5,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.grey.shade300
                ),
              ),
            ),),
          Positioned(
            top: 29,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.cyan
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 4,
            right: 30,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.cyan
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 30,
            right: 4,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.cyan
                ),
              ),
            ),)

        ],
      ),
    );
  }
  Widget _Selected_Seat(){
    return Container(
      width: 40,
      height: 40,
      child: Stack(
        children: [
          Positioned(
            top: 5,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.lightGreenAccent
                ),
              ),
            ),),
          Positioned(
            top: 29,
            bottom: 5,
            left: 5,
            right: 5,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.lightGreenAccent
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 4,
            right: 30,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.lightGreenAccent
                ),
              ),
            ),),
          Positioned(
            top: 15,
            bottom: 5,
            left: 30,
            right: 4,
            child:SizedBox(
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.lightGreenAccent
                ),
              ),
            ),)

        ],
      ),
    );
  }

}

And then, this is the final part, the modification of the main.dart file. Modify the main.dart file as this way

Dart

import 'package:flutter/material.dart';
import 'package:flutter_project_2/widget/List_Grid.dart';
import 'package:flutter_project_2/widget/ui_example_05.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Color(0xffd44d57)
      ),
      home: RedBusSeatUI(),
    );
  }
}

Now run the app and see the output of the code below. To Build and Run the App you can press shift + f10 in Windows and Ctrl + R in Mac.

Output:

Dashboard UI and Seat Select UI