前段时间有分享一款Uniapp+vue3跨端仿携程app酒店预订。这次带来全新研发的Flutter3.27跨平台旅行预约酒店app应用。
uni-app+vue3酒店预订app模板|uniapp+pinia2+uv-ui仿携程
效果如下
使用技术
- 编辑器：Vscode
- 技术框架：Flutter3.27.1+Dart3.6.0
- 路由/状态管理：get: ^4.6.6
- 本地缓存：get_storage: ^2.1.1
- 图片轮播组件：card_swiper^3.0.1
- 日期选择插件：syncfusion_flutter_datepicker^28.2.5
- 弹层提示：shirne_dialog^4.8.3
- 瀑布流组件：flutter_staggered_grid_view^0.7.0
- 滚动定位组件：scrollable_positioned_list^0.3.8
预订模块包括热门城市列表/位置品牌选择、入住离店日期区间选择、价格/星级选择等功能。
项目结构图
flutter3-trip酒店预订app项目已经发布到我的原创作品小铺。
原创Flutter3.27仿携程app酒店预约系统
再分享三篇之前研发的flutter3跨平台实战项目。
flutter3-dymall：仿抖音直播+短视频商城|Flutter3.27实战抖音app
flutter3-winchat：桌面端聊天实例|Flutter3.x+Dart3+Getx仿微信Exe程序
flutter3-chat：聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈
项目入口文件
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酒店预订模板
酒店日期区间选择，支持设置开始和结束日期，可滑动选择多个日期区间。
// 入住日期
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();
}
)
Ok，综上就是flutter3实现酒店预订模板的一些知识分享，希望对大家有些帮助哈~
往期热文
vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os
基于uniapp+vite5+pinia2跨端预订酒店app系统
tauri2.0桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板
基于vite5+electron31+elementPlus仿微信聊天Exe
基于uniapp+vue3+uv-ui聊天实例|uni-app+vite4仿微信app应用
作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000046132699
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
