2026重磅升级版Flutter3.41构建高性能App酒店模板
【摘要】 2026最新原创flutter3.41+dart3.11+get+cached_network_image搭建跨平台旅行app酒店预订程序。
爆肝两周左右，使用flutter3.41.5+dart3.11构建一款高颜值仿写飞猪/携程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构建高性能项目框架模板。
目前该项目已经正式完结并同步到我的原创作品集。
flutter项目入口配置
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,
),
);
}
}
如果你在开发者中遇到编译到手机app出现底部导航栏黑色背景，可尝试如下方法，有些开发者反馈最新flutter版本会出现这种情况。
AnnotatedRegion(
value: SystemUiOverlayStyle(
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
),
child: MaterialApp(
...
),
)
项目公共布局模板
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(
...
),
),
],
),
),
);
}
}
flutter3路由配置
import 'package:flutter/material.dart';
import 'package:get/get.dart';
// 引入工具类
import '../utils/common.dart';
import '../layouts/index.dart';
/* 引入路由页面 */
import '../pages/auth/login.dart';
import '../pages/auth/register.dart';
// 酒店模块
import '../pages/hotel/detail.dart';
import '../pages/hotel/search.dart';
import '../pages/hotel/book_sure.dart';
import '../pages/hotel/city.dart';
import '../pages/hotel/keyword.dart';
// 聊天消息模块
import '../pages/message/index.dart';
import '../pages/message/chat.dart';
// 订单模块
import '../pages/order/index.dart';
import '../pages/order/detail.dart';
// 路由地址集合
final Map<String, Widget> routes = {
'/': const Layout(),
'/hotel/detail': const HotelDetail(),
'/hotel/search': const HotelSearch(),
'/hotel/booksure': const BookSure(),
'/hotel/city': const CitySelect(),
'/hotel/keyword': const Keyword(),
'/message': const Message(),
'/message/chat': const MessageChat(),
'/order': const OrderPage(),
'/order/detail': const OrderDetail(),
};
final List<GetPage> routeList = routes.entries.map((e) => GetPage(
name: e.key, // 路由名称
page: () => e.value, // 路由页面
transition: Transition.rightToLeftWithFade, // 跳转路由动画
middlewares: [RouteMiddleware()], // 路由中间件
)).toList();
final List<GetPage> routePages = [
GetPage(name: '/login', page: () => const Login()),
GetPage(name: '/register', page: () => const Register()),
...routeList,
];
// 路由中间件拦截验证
class RouteMiddleware extends GetMiddleware {
@override
RouteSettings? redirect(String? route) {
return Common.isLogin() ? null : const RouteSettings(name: '/login');
}
}
基于Flutter3.41+DeepSeek+Dio+Get搭建APP版智能生成式AI助手
重磅自研Electron41+Vite8.0手搓DeepSeek电脑版AI智能系统
2026最新款Uniapp+DeepSeek+mphtml纯手撸跨三端ai流式输出模板
2026重磅爆肝tauri2.10+vite7.3+openai集成deepseek桌面客户端AI智能系统
首发vite8.0+vue3+deepseek+markdown手搓网页版ai流式生成模板
最新研发electron38+vite7.0+vue3客户端仿微信EXE聊天软件
Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面
2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe
原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用
2025最新款Tauri2.9+Vite7+Vue3+ElementPlus电脑端后台管理系统Exe
最新版Vite7.1+Tauri2.8+Vue3电脑端仿QQ/微信聊天程序
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）