In this tutorial, I will show you how to Create a cool Booking App UI Using Flutter, it's a very cool project in which you'll learn how to implement a tab bar, a list view with a horizontal scroll and how to create a Bottom navigation bar in Flutter, so without further ado let's start.
Our Main Page:
main.dart
import 'package:flutter/material.dart';
import 'package:travel_app/componenets/travelcard.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: TravelApp(),
));
}
class TravelApp extends StatefulWidget {
@override
_TravelAppState createState() => _TravelAppState();
}
class _TravelAppState extends State<TravelApp> {
//here i'm going to add a list of image url that I collected from the internet
//you can use the image that you want, just copy and paste their Urls here inside the list
List<String> urls = [
"https://resofrance.eu/wp-content/uploads/2018/09/hotel-luxe-mandarin-oriental-paris.jpg",
"https://blogger.googleusercontent.com/img/proxy/AVvXsEgOjDha6k2EK7S5ibrvBq_VbLC0PKU-mHjbQRMangup6NEp0zu786WpN5f4HOfbEUp513PtBWL-L7UPwPqKNsmqzy1r_DzOji_bBSWOKvXw6nMNSFoZynYkgTmQa59NrXW6zmn5VTPQp-505IrqzyEz8eEVLo7VnaRewF0mjg=",
"https://images.squarespace-cdn.com/content/v1/57d5245815d5db80eadeef3b/1558864684068-1CX3SZ0SFYZA1DFJSCYD/ke17ZwdGBToddI8pDm48kIpXjvpiLxnd0TWe793Q1fcUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcZwk0euuUA52dtKj-h3u7rSTnusqQy-ueHttlzqk_avnQ5Fuy2HU38XIezBtUAeHK/Marataba+Safari+lodge",
"https://blogger.googleusercontent.com/img/proxy/AVvXsEjPdBwsMFqgWWhTWBpXY0SyxzHlSrbn0KeqncpiDBQFqiY31eeFKlGZt_tz5UhB4UMtbO1Pgmzp3oLq7-MgewFF-w6Xa8if6VNFBHfKbLRpt6f5dNeiOYgWAm4eIqX_AMB_FzlYUfGFkDzGT_c3BrEK=",
"https://q-xx.bstatic.com/xdata/images/hotel/max500/216968639.jpg?k=a65c7ca7141416ffec244cbc1175bf3bae188d1b4919d5fb294fab5ec8ee2fd2&o=",
"https://hubinstitute.com/sites/default/files/styles/1200x500_crop/public/2018-06/photo-1439130490301-25e322d88054.jpeg?h=f720410d&itok=HI5-oD_g",
"https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1549318570/production/city/hero_image_2_1549318566.jpg",
"https://www.shieldsgazette.com/images-i.jpimedia.uk/imagefetch/https://jpgreatcontent.co.uk/wp-content/uploads/2020/04/spain.jpg",
"https://www.telegraph.co.uk/content/dam/Travel/2017/November/tunisia-sidi-bou-GettyImages-575664325.jpg",
"https://lp-cms-production.imgix.net/features/2018/06/byrsa-hill-carthage-tunis-tunisia-2d96efe7b9bf.jpg"
];
//sometime we can face some http request erreur if the owner of the picture delted it or the url is not available
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF6F7FF),
appBar: AppBar(
elevation: 0.0,
backgroundColor: Color(0xFFF6F7FF),
title: Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.menu,
color: Colors.black,
),
),
],
),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Let's start by adding the text
Text(
"Welcome Doctor Code",
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.w600,
),
),
Text(
"Pick your destination",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.w300,
),
),
SizedBox(
height: 20.0,
),
//Now let's add some elevation to our text field
//to do this we need to wrap it in a Material widget
Material(
elevation: 10.0,
borderRadius: BorderRadius.circular(30.0),
shadowColor: Color(0x55434343),
child: TextField(
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
hintText: "Search for Hotel, Flight...",
prefixIcon: Icon(
Icons.search,
color: Colors.black54,
),
border: InputBorder.none,
),
),
),
SizedBox(height: 30.0),
//Now let's Add a Tabulation bar
DefaultTabController(
length: 3,
child: Expanded(
child: Column(
children: [
TabBar(
indicatorColor: Color(0xFFFE8C68),
unselectedLabelColor: Color(0xFF555555),
labelColor: Color(0xFFFE8C68),
labelPadding: EdgeInsets.symmetric(horizontal: 8.0),
tabs: [
Tab(
text: "Trending",
),
Tab(
text: "Promotion",
),
Tab(
text: "Favorites",
),
],
),
SizedBox(
height: 20.0,
),
Container(
height: 300.0,
child: TabBarView(
children: [
//Now let's create our first tab page
Container(
child: ListView(
scrollDirection: Axis.horizontal,
children: [
//Now let's add and test our first card
travelCard(
urls[0], "Luxary Hotel", "Caroline", 3),
travelCard(urls[5], "Plaza Hotel", "Italy", 4),
travelCard(
urls[2], "Safari Hotel", "Africa", 5),
],
),
),
Container(
child: ListView(
scrollDirection: Axis.horizontal,
children: [
//Here you can add what ever you want
travelCard(urls[6], "Visit Rome", "Italy", 4),
travelCard(urls[8], "Visit Sidi bou Said",
"Tunsia", 4),
],
),
),
Container(
child: ListView(
scrollDirection: Axis.horizontal,
children: [],
),
),
],
),
),
],
),
),
)
],
),
),
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Color(0xFFB7B7B7),
selectedItemColor: Color(0xFFFE8C68),
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark),
title: Text("BookMark"),
),
BottomNavigationBarItem(
icon: Icon(Icons.location_on),
title: Text("Destination"),
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
title: Text("Notification"),
),
],
),
);
}
}
the travel card custom widget
travelcard.dart:
//Now we will create our custom widget card
import 'package:flutter/material.dart';
Widget travelCard(
String imgUrl, String hotelName, String location, int rating) {
return Card(
margin: EdgeInsets.only(right: 22.0),
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
elevation: 0.0,
child: InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(imgUrl),
fit: BoxFit.cover,
scale: 2.0,
)),
width: 200.0,
child: Padding(
padding: EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
//this loop will allow us to add as many star as the rating
for (var i = 0; i < rating; i++)
Icon(
Icons.star,
color: Color(0xFFFE8C68),
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
hotelName,
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.w800,
),
),
SizedBox(
height: 3.0,
),
Text(
location,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
),
),
),
);
}
How to Make a Booking App using Flutter
Reviewed by Medics
on
September 07, 2020
Rating:
Reviewed by Medics
on
September 07, 2020
Rating:
WOW ! I like your passion that's great.
ReplyDeleteIt is truly a well-researched content and excellent wording. I got so engaged in this material that I couldn’t wait reading. I am impressed with your work and skill. Thanks. post construction cleaning services
ReplyDeleteThanks for sharing the above information. It's really useful and informative. Keep sharing
ReplyDeleteTo make your hotel business more preferable or to gather plenty of hotel records into a single platform, we came up with a comprehensive, advance and sophisticated OYO like Room Booking Solution, which helps you to manage bookings, user records, price comparison, and much more.
Room Booking Solution
Get Postal Code
ReplyDeleteHow To Set Up Bottom Navigation Bar In Flutter App
ReplyDeleteThe Material Design specification describes a bottom navigation bar as a row of three buttons at the bottom of the screen that are used to select among as many destinations..
For More Info:- How To Set Up Bottom Navigation Bar In Flutter App