RedBus Ticket Booking Flutter:Flutter Ticket Booking App allow the user to place their booking at a time that is most convenient for them. Using an online booking system, they can make their booking at any time of day or night, without having to worry if it’s within business hours or not.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Constructing and Accomplishing Solutions around them is an expertise that only a few have acquired. Flutterdevs is prominently one of them.
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.
Step-by-Step Implementation
Step 1: Create a New Project
To create a new project in Visual Studio code. Firstly select empty Flutter activity then click the next button. Give the name of your app like “Redbus UI”.
in the main.dart page remove the unwanted lines and copy the following code
import 'package:bus/Navigation.dart';
import 'package:bus/RedBusSeatUI.dart';
import 'package:flutter/material.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(),
Botton_Nav_Redbus());
}
}
Step 2: Create the Navigation Bar
To create the bottom navigation bar for navigating the user to the next screen by swiping or clicking the button.
import 'package:bus/screen3.dart';
import 'package:flutter/material.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: [
Screen3(),
Screen3(),
Screen3(),
Screen3(),
],
),
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,
),
);
}
}
Step 2: Create the Dashboard UI
To create the dashboard of the RedBus application screen use the following lines of code.
RedBus Ticket Booking Flutter:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Screen3 extends StatefulWidget {
const Screen3({Key? key}) : super(key: key);
@override
_Screen3State createState() => _Screen3State();
}
class _Screen3State extends State<Screen3> {
@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)))
],
),
),
),
)
],
),
);
}
}
For More: To know about Zomato App in Flutter.
Leave a Reply