本教程中，我将向您展示如何使用 Flutter 创建一个很酷的 Booking App UI
这是一个非常酷的项目，您将在其中学习如何实现标签栏、具有水平滚动的列表视图以及如何创建底部Flutter 中的导航栏，所以不用多说，让我们开始吧。
我们的主页：
main.dart
代码语言：javascript复制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://lh3.googleusercontent.com/proxy/wTkD1USQGpbVXzZFNLCZBDCL1OQS1bFzSgPa44cHwiheaY9DpoqMdNjBgEJcCIZSQeSkCO-2q5gfuhtnuz4cDhtpansOcWos093YsGvogdQqWnpWlA",
"https://images.squarespace-cdn.com/content/v1/57d5245815d5db80eadeef3b/1558864684068-1CX3SZ0SFYZA1DFJSCYD/ke17ZwdGBToddI8pDm48kIpXjvpiLxnd0TWe793Q1fcUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcZwk0euuUA52dtKj-h3u7rSTnusqQy-ueHttlzqk_avnQ5Fuy2HU38XIezBtUAeHK/Marataba Safari lodge",
"https://lh3.googleusercontent.com/proxy/ovCSxeucYYoir_rZdSYq8FfCHPeot49lbYqlk7nXs7sXjqAfbZ2uw_1E9iivLT85LwIZiGSnXuqkdbQ_xKFhd91M7Y05G94d",
"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"),
),
],
),
);
}
}travelcard.dart:
代码语言：javascript复制//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,
),
),
],
),
),
],
),
),
),
),
);
}
