经过了两周爆肝升级Flutter3.41.5+Dart3.11.3+Getx搭建跨平台高性能app旅行预约系统。
使用技术
- 开发工具：vscode
- 跨平台技术框架：flutter3.41.5+dart3.11.3
- 路由/状态管理：get^4.7.3
- 本地缓存：get_storage^2.1.1
- 图片轮播组件：card_swiper^3.0.1
- 图片缓存：cached_network_image^3.4.1
- 日期选择插件：syncfusion_flutter_datepicker^33.1.49
- 弹层提示：shirne_dialog^4.9.0
- 瀑布流组件：flutter_staggered_grid_view^0.7.0
- 滚动定位组件：scrollable_positioned_list^0.3.8
项目框架结构目录
使用最新版flutter3.41初始构建项目模板。
【App体验版】原生Flutter3.41+Dart3.11旅行预约酒店app程序 - bilibili
入口配置文件
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.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 MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return AnnotatedRegion(
value: SystemUiOverlayStyle(
/**
* 修复flutter3.32以上会出现底部导航栏背景黑色
* The bottom navigation bar is always black from flutter: 3.32.1.
* It's working fine on flutter: 3.29.3
*/
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
),
child: GetMaterialApp(
title: 'Flutter3 Trip',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Color(0xffffaa00)),
useMaterial3: true,
// 修复windows下字体不一致情况
fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null
),
home: const Layout(),
// 初始化路由
initialRoute: Common.isLogin() ? '/' : '/login',
// 路由页面
getPages: routePages,
// 初始化弹窗key
navigatorKey: MyDialog.navigatorKey,
),
);
}
}
项目公共布局
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
// 引入pages页面
import '../pages/index/index.dart';
import '../pages/hotel/index.dart';
import '../pages/message/index.dart';
import '../pages/explore/index.dart';
import '../pages/my/index.dart';
class Layout extends StatefulWidget {
const Layout({super.key});
@override
State<Layout> createState() => _LayoutState();
}
class _LayoutState extends State<Layout> with AutomaticKeepAliveClientMixin {
// page索引
int pageCurrent = 0;
// page页面
late final List<Widget> pageList = const [
IndexPage(),
HotelPage(),
ExplorePage(),
Message(),
MyPage()
];
@override
bool get wantKeepAlive => true;
// 动态生成导航项
List<BottomNavigationBarItem> buildNavItems() {
return [
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
];
}
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
backgroundColor: Colors.grey[50],
body: IndexedStack(
index: pageCurrent,
children: pageList,
),
// 底部导航栏
bottomNavigationBar: Theme(
// Flutter去掉BottomNavigationBar底部导航栏的水波纹
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
border: Border(top: BorderSide(color: Colors.black45, width: .1)),
),
child: BottomNavigationBar(
backgroundColor: Colors.white,
fixedColor: Color(0xffffaa00),
unselectedItemColor: Colors.black,
type: BottomNavigationBarType.fixed,
elevation: 1.0,
unselectedFontSize: 12.0,
selectedFontSize: 12.0,
currentIndex: pageCurrent,
items: buildNavItems(),
onTap: (index) {
if(pageCurrent == index) return;
setState(() {
pageCurrent = index;
});
},
),
),
// 自定义底部导航栏中间按钮
Positioned(
left: MediaQuery.of(context).size.width / 2 - 18,
top: 0,
bottom: 0,
child: InkWell(
...
),
),
],
),
),
);
}
}
flutter预订酒店模板
使用 scrollable_positioned_list 组件实现滑动字母索引滚动到指定列表位置。
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;
});
},
),
)
使用 syncfusion_flutter_datepicker 插件选择入住/离店日期。
// 入住日期
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();
},
)
综上就是Flutter3.41实战开发一款旅行预约app应用，感谢大家的阅读与支持！
自研flutter3.38实战抖音app短视频+聊天+直播商城系统
基于flutter3.32+window_manager仿macOS/Wins风格桌面os系统
flutter3.27+bitsdojo_window电脑端仿微信Exe应用
爆肝flutter3.41+dart3.11+getx+dio仿写deepseek智能ai应用app
vite8.0-webai网页版AI模板|vue3+vite8+deepseek专属web版流式ai回答助手
2026实战uniapp+vue3+mphtml调用deepseek【小程序+安卓+H5】流式输出ai
Electron41 + Vite8 + Vue3.5实战打造你的专属AI回答助手
2026最新款Tauri2.10+Vite7.3+DeepSeek桌面版AI系统Exe
2026最新款Vite7+Vue3+DeepSeek-V3.2+Markdown移动端流式输出AI会话
基于electron38+vite7+vue3 setup+elementPlus电脑端仿微信/QQ聊天软件
electron38.2-vue3os系统|Vite7+Electron38+Pinia3+ArcoDesign桌面版OS后台管理
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS
