Flutter template Design with Free Source Code. If you want to practice along I also Added a video for it as well as code so that you guys can copy and paste it and use it for practice.
Video Tutorial in Hindi
First Screen (Part 1):
This is the video For Screen One(Part 1)
Second Screen (Part 2):
Third Screen (Part 3):
(Adding Soon)
Flutter Template Source Code:
This is the main file and the First screen of the Template
First Screen (Source Code):
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int currentButton = 0;
List<String> buttonList01 = [
"https://images.unsplash.com/photo-1589182373726-e4f658ab50f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80",
"https://images.unsplash.com/photo-1589182373726-e4f658ab50f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80",
];
List<String> buttonList02 = [
"https://thumbs.dreamstime.com/b/scenic-view-moraine-lake-mountain-range-sunset-landscape-canadian-rocky-mountains-49666349.jpg",
"https://thumbs.dreamstime.com/b/scenic-view-moraine-lake-mountain-range-sunset-landscape-canadian-rocky-mountains-49666349.jpg",
];
List<String> buttonList03 = [
"https://images.unsplash.com/photo-1589802829985-817e51171b92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80",
"https://images.unsplash.com/photo-1589802829985-817e51171b92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80",
];
List<String> mainList = [];
@override
void initState() {
// TODO: implement initState
mainList = buttonList01;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
color: Color(0xff0F2940),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.menu,
color: Colors.white,
)),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.search,
color: Colors.white,
))
],
),
),
const Padding(
padding: EdgeInsets.only(left: 16.0, top: 40.0, bottom: 30.0),
child: Text(
"Explore\nthe world",
style: TextStyle(
color: Colors.white,
fontSize: 38,
),
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: mainList.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(
top: 20, left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: (){
setState(() {
currentButton = 2;
mainList = buttonList03;
});
},
child: Text("Flutter",style: TextStyle(
color: currentButton == 2? Colors.amber: Colors.black,
)),
),
SizedBox(
width: 100.0,
),
GestureDetector(
onTap: (){
setState(() {
currentButton = 1;
mainList = buttonList02;
});
},
child: Text("Flutter",style: TextStyle(
color: currentButton == 1? Colors.amber: Colors.black,
)),
),
SizedBox(
width: 100.0,
),
GestureDetector(
onTap: (){
setState(() {
currentButton = 0;
mainList = buttonList01;
});
},
child: Text(
"Flutter",
style: TextStyle(
color: currentButton == 0 ? Colors.amber: Colors.white,
),
),
),
],
),
),
);
} else {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(20.0),
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Image.network(mainList[index-1],fit: BoxFit.cover,)),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text("Mountain" ,style: TextStyle(fontSize: 26)),
),
Padding(
padding: const EdgeInsets.only(left: 20,bottom: 26.0),
child: Row(
children: [
Icon(Icons.location_on, color: Colors.amber,),
Text("Mountain" ,style: TextStyle(fontSize: 14,color: Colors.grey))
],
),
),
],
);
}
},
),
)
],
)
],
),
);
}
}
Second Screen (Source Code):
Create a new file called SecondScreen and call this file in the main file or main function
import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
State<SecondScreen> createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
//BackGround
Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
color: Color(0xff0F2940),
)
],
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.arrow_back_ios,
color: Colors.white,
)),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.more_vert,
color: Colors.white,
))
],
),
),
const Padding(
padding: EdgeInsets.only(left: 16.0, top: 40.0, bottom: 30.0),
child: Text(
"Mountain\nPackages",
style: TextStyle(
color: Colors.white,
fontSize: 38,
),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
height: 220,
child: ClipRRect(
borderRadius:
BorderRadius.circular(10.0),
child: Image.network(
"https://media-cdn.tripadvisor.com/media/photo-s/14/bb/b1/f7/caption.jpg",
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight:
Radius.circular(10.0)),
color: Colors.orange,
),
child: Icon(
Icons.calendar_today,
color: Colors.white,
size: 18,
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: const Text(
"Trekking",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
children: const [
Icon(
Icons.location_on,
color: Colors.amber,
size: 16,
),
Text(
"Tours + Hotel",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
fontWeight: FontWeight.w500),
),
],
),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
height: 220,
child: ClipRRect(
borderRadius:
BorderRadius.circular(10.0),
child: Image.network(
"https://media-cdn.tripadvisor.com/media/photo-s/14/bb/b1/f7/caption.jpg",
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight:
Radius.circular(10.0)),
color: Colors.orange,
),
child: Icon(
Icons.calendar_today,
color: Colors.white,
size: 18,
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: const Text(
"Trekking",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
children: const [
Icon(
Icons.location_on,
color: Colors.amber,
size: 16,
),
Text(
"Tours + Hotel",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
fontWeight: FontWeight.w500),
),
],
),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 220,
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.network(
"https://media-cdn.tripadvisor.com/media/photo-s/14/bb/b1/f7/caption.jpg",
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: const Text(
"Trekking",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
children: const [
Icon(
Icons.location_on,
color: Colors.amber,
size: 16,
),
Text(
"Tours + Hotel",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
fontWeight: FontWeight.w500),
),
],
),
)
],
),
],
),
),
SizedBox(
width: 20,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
children: [
Text(
"Sort by",
style: TextStyle(
color: Colors.white, fontSize: 16),
),
Text(
"Price",
style: TextStyle(
color: Colors.amber, fontSize: 20),
),
],
),
Icon(
Icons.arrow_downward_outlined,
color: Colors.white,
)
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 220,
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.network(
"https://i.pinimg.com/originals/d3/45/11/d3451114ab4e1d55ead624930bcff60c.jpg",
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: const Text(
"Trekking",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
children: const [
Icon(
Icons.location_on,
color: Colors.amber,
size: 16,
),
Text(
"Tours + Hotel",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
fontWeight: FontWeight.w500),
),
],
),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 220,
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.network(
"https://media-cdn.tripadvisor.com/media/photo-s/14/bb/b1/f7/caption.jpg",
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: const Text(
"Trekking",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
children: const [
Icon(
Icons.location_on,
color: Colors.amber,
size: 16,
),
Text(
"Tours + Hotel",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
fontWeight: FontWeight.w500),
),
],
),
)
],
),
],
),
),
],
),
)
],
),
)
],
),
);
}
}
Code for the Second and the Third screen will be added soon in this article Stay tuned For that.
Template Cradites: https://www.freepik.com/free-vector/travel-booking-app_9471000.htm#query=mobile%20app%20ui&position=13&from_view=keyword
For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.
Remember FlutterDecode.com