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
Recommended Articles