最新2025开年原创跨平台新作flutter3.x+dart3仿携程/飞猪旅游酒店客房查询预订app系统项目Flutter3Trip，正式完结啦~
flutter3-trip基于最新版跨平台框架flutter3.27.1+dart3.6+getx+flutter_datepicker架构的一款高性能仿携程酒店预订app系统模板。
https://www.bilibili.com/video/BV1MuArefEBT/?aid=114031180387...
酒店预订模块包括了热门城市列表/位置品牌选择、入住离店日期区间选择、价格/星级选择等功能。
技术栈
- 编码开发：Vscode
- 技术框架：Flutter3.27.1+Dart3.6.0
- 状态管理：get: ^4.6.6
- 本地缓存：get_storage: ^2.1.1
- 日期选择插件：syncfusion_flutter_datepicker^28.2.5
- 图片轮播组件：card_swiper^3.0.1
- 滚动定位组件：scrollable_positioned_list^0.3.8
- 弹层提示：shirne_dialog^4.8.3
- 瀑布流组件：flutter_staggered_grid_view^0.7.0
项目框架结构
flutter3-trip酒店预订项目已经同步到我的作品集，有需要的可以去看看。
分享三篇之前研发的flutter3跨平台实战项目。
flutter3-dymall仿抖音直播+短视频商城|Flutter3.27实战抖音app
flutter3-winchat桌面端聊天实例|Flutter3.x+Dart3+Getx仿微信Exe程序
flutter3+dart3聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈
flutter3入口文件
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:shirne_dialog/shirne_dialog.dart';
import 'utils/common.dart';
// 引入布局页面
import 'layouts/index.dart';
// 引入路由配置
import 'router/index.dart';
void main() async {
// 初始化get_storage存储
await GetStorage.init();
// 初始化国际化语言
initializeDateFormatting('zh_CN');
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter3 Trip',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF006ff6)),
useMaterial3: true,
// 修正windows下字体不一致情况
fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null
),
home: const Layout(),
// 初始化路由
initialRoute: Common.isLogin() ? '/' : '/login',
// 路由页面
getPages: routePages,
// 初始化弹窗key
navigatorKey: MyDialog.navigatorKey,
);
}
}
flutter3实现滚动指示器
分类滚动指示槽采用 SingleChildScrollView 和 Stack 组件实现功能。
late ScrollController indicatorController = ScrollController();
// 滚动位置
double indicatorOffset = 0;
@override
void initState() {
super.initState();
indicatorController.addListener(() {
setState(() {
indicatorOffset = indicatorController.position.pixels / indicatorController.position.maxScrollExtent;
});
});
...
}
Column(
children: [
Expanded(
child: SingleChildScrollView(
controller: indicatorController,
scrollDirection: Axis.horizontal,
child: Row(
...
),
),
),
// 指示槽
Stack(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFE1EFFF),
borderRadius: BorderRadius.circular(50.0),
),
height: 4.0,
width: 50.0,
),
Container(
margin: EdgeInsets.only(left: indicatorOffset * 30.0),
decoration: BoxDecoration(
color: Color(0xFF006ff6),
borderRadius: BorderRadius.circular(50.0),
),
width: 20.0,
height: 4.0,
),
],
),
],
),
flutter3酒店预订功能
对该模块单独封装分离了一个组件。
预订模块包含热门城市/位置品牌选择、入住离店日期区间、价格/星级等功能。
ItemScrollController itemScrollController = ItemScrollController();
ScrollablePositionedList.builder(
itemScrollController: itemScrollController,
itemCount: citylist.length,
itemBuilder: (context, index) {
// ...
}
)
// 侧边索引
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
child: Container(
color: Colors.transparent,
width: 25.0,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(pinyinList.length, (index) {
return GestureDetector(
child: Container(
...
),
onTapDown: (details) {
// 跳转指定索引位置
itemScrollController.jumpTo(index: index);
setState(() {
selectedLetter = pinyinList[index];
showBubble = true;
});
Future.delayed(Duration(milliseconds: 200), () {
setState(() {
selectedLetter = '';
showBubble = false;
});
});
},
);
}),
),
),
onVerticalDragUpdate: (details) {
updateSelectedLetter(details.localPosition);
},
onVerticalDragEnd: (details) {
setState(() {
selectedLetter = '';
showBubble = false;
});
},
),
),
酒店日期区间选择，支持设置开始和结束日期，可滑动选择多个日期区间。
// 入住日期
DateTime startDate = DateTime.now();
// 离店日期
DateTime endDate = DateTime.now().add(Duration(days: 1));
GestureDetector(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Color(0xfff5f5f5))),
),
child: Row(
spacing: 10.0,
children: [
Icon(Icons.calendar_month_outlined),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 3.0,
children: [
Text('入住', style: TextStyle(color: Colors.grey, fontSize: 12.0)),
Text('${DateFormat('MM-dd').format(startDate)} ${DateFormat('E', 'zh_CN').format(startDate)}'),
],
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 1.0),
// DateTime 类提供了 difference 方法，可以计算两个日期之间的时间差，返回一个 Duration 对象。通过 Duration 的 inDays 属性，可以获取天数差。
child: Text('共${endDate.difference(startDate).inDays}晚'),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
spacing: 3.0,
children: [
Text('离店', style: TextStyle(color: Colors.grey, fontSize: 12.0)),
Text('${DateFormat('MM-dd').format(endDate)} ${DateFormat('E', 'zh_CN').format(endDate)}'),
],
),
],
),
),
Icon(Icons.arrow_forward_ios_rounded, color: Colors.grey, size: 12.0,)
],
),
),
onTap: () {
handleCalendar();
},
),void handleCalendar() {
showModalBottomSheet(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(0.0))),
context: context,
builder: (BuildContext context) {
return Column(
children: [
Expanded(
child: SfDateRangePicker(
selectionMode: DateRangePickerSelectionMode.range,
selectionShape: DateRangePickerSelectionShape.rectangle,
// 初始日期范围
initialSelectedRange: PickerDateRange(startDate, endDate),
minDate: DateTime.now(),
maxDate: DateTime.now().add(Duration(days: 450)),
backgroundColor: Colors.white,
// 日期区间颜色
startRangeSelectionColor: Color(0xFF006ff6),
endRangeSelectionColor: Color(0xFF006ff6),
rangeSelectionColor: Color(0xFFe3f0f9),
// 选中颜色
selectionColor: Color(0xFF006ff6),
rangeTextStyle: TextStyle(color: Color(0xFF006ff6)),
monthViewSettings: DateRangePickerMonthViewSettings(
// 改变一周的第一天
firstDayOfWeek: 1,
viewHeaderStyle: DateRangePickerViewHeaderStyle(
textStyle: TextStyle(color: Color(0xFF130438), fontSize: 12, fontFamily: 'Arial'),
),
dayFormat: 'EE',
),
// 自定义头部样式
headerStyle: DateRangePickerHeaderStyle(
backgroundColor: Colors.white,
textAlign: TextAlign.center
),
// 日期单元格样式
monthCellStyle: DateRangePickerMonthCellStyle(
cellDecoration: BoxDecoration(
// color: Color(0xFFf7f4ff),
),
todayTextStyle: TextStyle(color: Color(0xFF006ff6)),
disabledDatesTextStyle: TextStyle(color: Colors.black26),
weekendTextStyle: TextStyle(color: Colors.red.withAlpha(200)),
),
// showTodayButton: true,
// showActionButtons: true,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
setState(() {
if(args.value.startDate != null && args.value.endDate != null) {
startDate = args.value.startDate;
endDate = args.value.endDate;
Future.delayed(Duration(seconds: 1), () {
Get.back();
});
}
});
},
),
),
],
);
},
);
}
flutter3消息聊天模块
这部分功能是之前开发的一款flutter3.x仿微信app聊天功能的精简版。感兴趣的可以去看看下面这篇分享文章。
综上就是flutter3.27实战携程酒店预订app模板的一些知识分享，整个项目涉及知识点还是挺多的。
希望以上分享对大家有些帮助！
- 基于uniapp+vue3+uv-ui聊天实例|uni-app+vite4仿微信app应用
https://segmentfault.com/a/1190000044847552 - tauri2.0+vite6客户端仿MacOS桌面|tauri2+rust+vue3桌面os
https://segmentfault.com/a/1190000045667190 - tauri2.0+vue3桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板
https://segmentfault.com/a/1190000045381943 - 原创electron31+vue3+elementPlus仿微信客户端聊天Exe实例
https://segmentfault.com/a/1190000045042968 - 基于electron31+vue3+pinia2桌面端后台管理模板
https://segmentfault.com/a/1190000045186093 - Electron32-MacOS：基于vue3+electron32+arcoDesign仿win/mac桌面os模板
https://segmentfault.com/a/1190000045245775 - 基于uniapp+vite5+pinia2跨端预订酒店app系统
https://segmentfault.com/a/1190000045556523
flutter
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。