UI credits : https://www.figma.com/community/file/1075755240115004690/Travel-Mobile-App-Design
for explanation watch video
Result
files
assets
img1.png
img2.png
img3.png
img4.png
img5.png
img6.png
pubspec.yaml
name: testapp
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: "none" # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: ">=2.19.0 <3.0.0"
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
main.dart
import 'package:flutter/material.dart';
import 'package:testapp/book_flight_page.dart';
import 'package:testapp/landing_page.dart';
import 'package:testapp/search_flight_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// theme: ThemeData(
// // This is the theme of your application.
// //
// // Try running your application with "flutter run". You'll see the
// // application has a blue toolbar. Then, without quitting the app, try
// // changing the primarySwatch below to Colors.green and then invoke
// // "hot reload" (press "r" in the console where you ran "flutter run",
// // or simply save your changes to "hot reload" in a Flutter IDE).
// // Notice that the counter didn't reset back to zero; the application
// // is not restarted.
// primarySwatch: Colors.blue,
// ),
theme: ThemeData(
scaffoldBackgroundColor: const Color.fromRGBO(64, 147, 206, 100)),
home: LandingPage(),
debugShowCheckedModeBanner: false,
);
}
}
landing_page.dart
import 'package:flutter/material.dart';
import 'package:testapp/search_flight_page.dart';
class LandingPage extends StatefulWidget {
const LandingPage({super.key});
@override
State<LandingPage> createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
// backgroundColor: Color.fromRGBO(211, 221, 229, 100),
body: Center(
child: Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Container(
height: 313,
width: 304,
decoration: BoxDecoration(
color: Colors.white,
// borderRadius: BorderRadius.circular(100),
shape: BoxShape.circle,
),
child: Center(
child: Image.asset(
'img1.png',
height: 205,
width: 220,
),
),
),
SizedBox(
height: 30,
),
Text(
'Let’s Enjoy A',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
'New World',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
),
Text(
'Search the safest destination',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
),
Container(
height: 50,
width: 260,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(64, 147, 206, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SearchFlightPage()));
},
child: Text(
'Get Started',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
)
],
),
),
),
);
}
}
search_flight_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
class SearchFlightPage extends StatefulWidget {
const SearchFlightPage({super.key});
@override
State<SearchFlightPage> createState() => _SearchFlightPageState();
}
class _SearchFlightPageState extends State<SearchFlightPage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image.asset(
'img2.png',
height: 40,
width: 40,
),
SizedBox(
width: 20,
),
Text(
'Hi Tania!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
Icon(
Icons.notifications,
color: Colors.white,
),
],
),
SizedBox(
height: 10,
),
Text(
'Where you want to',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(
'go?',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
SizedBox(
height: 10,
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(255, 255, 255, 100),
),
// height: 60,
child: TextField(
// focusNode: _searchFocusNode,
// controller: _searchController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: 'Search a flight',
border: OutlineInputBorder(),
),
),
),
SizedBox(
height: 10,
),
Text(
'Upcoming Trips',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.all(20),
height: 120,
decoration: BoxDecoration(
color: Color.fromRGBO(28, 94, 133, 100),
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'10 May, 12:30 pm',
style: TextStyle(color: Colors.white),
),
Text(
'11 May, 08:15 am',
style: TextStyle(color: Colors.white),
),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'ABC',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Text('.....'),
Icon(Icons.flight),
Text('.....'),
Text(
'XYZ',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 20,
width: 150,
decoration: BoxDecoration(
color: Color.fromRGBO(173, 206, 225, 100),
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: Text(
'Abianca, Sodaium',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color.fromRGBO(63, 126, 164, 100),
),
)),
),
Container(
height: 20,
width: 150,
decoration: BoxDecoration(
color: Color.fromRGBO(173, 206, 225, 100),
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: Text(
'Xyzaira, Filanto',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color.fromRGBO(63, 126, 164, 100),
),
)),
),
],
),
],
),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Popular Destinations',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Text(
'View All',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
popularDestinations('img3.png', 'Paris', 'France'),
popularDestinations('img4.png', 'Rome', 'Italy'),
popularDestinations('img5.png', 'Istanbul', 'Turkey'),
],
),
],
),
),
bottomNavigationBar: SizedBox(
height: 40,
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.blue,
),
label: 'Home',
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(
Icons.home_work,
color: Colors.blue,
),
label: 'Search',
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
color: Colors.blue,
),
label: 'Profile',
backgroundColor: Colors.white,
),
],
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
iconSize: 10,
onTap: _onItemTapped,
elevation: 2),
),
);
}
Widget popularDestinations(String img, String city, String country) {
return Container(
padding: EdgeInsets.fromLTRB(2, 2, 2, 3),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
height: 152,
width: 95,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
img,
height: 114,
width: 91,
),
SizedBox(
height: 2,
),
Text(
city,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Text(
country,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(172, 171, 171, 100),
),
),
],
),
);
}
}
book_flight_page.dart
import 'package:flutter/material.dart';
class BookFlightPage extends StatefulWidget {
const BookFlightPage({super.key});
@override
State<BookFlightPage> createState() => _BookFlightPageState();
}
class _BookFlightPageState extends State<BookFlightPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(300),
bottomRight: Radius.circular(300),
)),
child: Center(child: Image.asset('img6.png')),
),
SizedBox(
height: 20,
),
Text(
'Book your flight',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40,
width: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(64, 147, 206, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {},
child: Text(
'One way',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
),
Container(
height: 40,
width: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(215, 234, 248, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {},
child: Text(
'Round Trip',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
),
],
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.all(10),
width: 308,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('From'),
SizedBox(
height: 5,
),
SizedBox(
height: 35,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
fillColor: Color.fromRGBO(224, 237, 246, 100),
filled: true,
),
),
),
SizedBox(
height: 5,
),
Text('To'),
SizedBox(
height: 5,
),
SizedBox(
height: 35,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
fillColor: Color.fromRGBO(224, 237, 246, 100),
filled: true,
),
),
),
SizedBox(
height: 5,
),
Text('Date'),
SizedBox(
height: 5,
),
SizedBox(
height: 35,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
fillColor: Color.fromRGBO(224, 237, 246, 100),
filled: true,
),
),
),
SizedBox(
height: 10,
),
Container(
height: 50,
width: 280,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(64, 147, 206, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {},
child: Text(
'View Flights',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
),
],
),
),
],
),
),
);
}
}
Top comments (1)
Thanks for the post.
Please upload the files to github next time and mention the repo link here rather than giving each file code individually!