2025跨平台Flutter3.27+Dart3+Getx仿携程/飞猪app旅游酒店预订系统

最新推荐文章于 2025-03-11 22:41:00 发布
置顶 最新推荐文章于 2025-03-11 22:41:00 发布
阅读量1.9k 收藏 12
点赞数 48
分类专栏： flutter3+dart3 flutter/dart实例 文章标签： flutter3仿携程app flutter3酒店预订 flutter3-trip flutter3-hotel flutter3仿同程 flutter3预约酒店app flutter3旅游预订app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/145752821
版权

Flutter3-weTrip自研仿携程旅行酒店预订app应用。

2025原创自研新作flutter3.27+dart3.6+getx+flutter_datepicker实战仿携程/同程/飞猪旅行app酒店客房查询预订系统。实现首页、酒店预订、列表/详情、动态、订单、消息聊天、我的等模块。

在这里插入图片描述
在这里插入图片描述

使用技术

  • 编码工具：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
  • toast提示插件：shirne_dialog^4.8.3
  • 瀑布流组件：flutter_staggered_grid_view^0.7.0
  • 滚动定位组件：scrollable_positioned_list^0.3.8

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

预订模块包含了热门城市/位置品牌选择、入住离店日期区间选择、价格/星级筛选等功能。

在这里插入图片描述

项目结构目录

使用vscode编辑器开发，基于最新版跨平台框架flutter3.27构建项目模板。

在这里插入图片描述
在这里插入图片描述

目前flutter3-trip项目已经同步到我的原创作品店，感兴趣的可以去看看。

原创flutter3.27仿携程旅行酒店客房预订app应用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
分享几个flutter3.x实战项目案例。

原创flutter3.27实战抖音app商城|flutter3.x+getX短视频+直播+聊天实例
基于Flutter3+bitsdojo_window+Getx桌面端仿微信EXE
基于flutter3.x+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布局模板

在这里插入图片描述

class Layout extends StatefulWidget {
  const Layout({super.key});

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  // page索引
  int pageCurrent = 0;
  // page页面
  List pageList = [IndexPage(), HotelPage(), ExplorePage(), OrderPage(), MyPage()];
  // tabs选项
  List navItems = [
    BottomNavigationBarItem(
      icon: Icon(Icons.rocket_launch_sharp),
      label: '首页'
    ),
    BottomNavigationBarItem(
      icon: Stack(
        alignment: Alignment(1.5, -1),
        children: [
          Icon(Icons.location_city_sharp),
          FStyle.badge(0, isdot: true)
        ],
      ),
      label: '酒店'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.hotel, color: Colors.transparent,),
      label: ''
    ),
    BottomNavigationBarItem(
      icon: Stack(
        alignment: Alignment(4, -2),
        children: [
          Icon(Icons.list_alt_rounded),
          FStyle.badge(1)
        ],
      ),
      label: '订单'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person_pin),
      label: '我'
    )
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: pageList[pageCurrent],
      // 底部导航栏
      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: FStyle.primaryColor,
                unselectedItemColor: Colors.black54,
                type: BottomNavigationBarType.fixed,
                elevation: 1.0,
                unselectedFontSize: 12.0,
                selectedFontSize: 12.0,
                currentIndex: pageCurrent,
                items: [
                  ...navItems
                ],
                onTap: (index) {
                  setState(() {
                    pageCurrent = index;
                  });
                },
              ),
            ),
            // 自定义底部导航栏中间按钮
            Positioned(
              left: MediaQuery.of(context).size.width / 2 - 18,
              top: 0,
              bottom: 0,
              child: InkWell(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('assets/images/logo.png', width: 36.0, isAntiAlias: true, fit: BoxFit.contain,),
                  ],
                ),
                onTap: () {
                  setState(() {
                    pageCurrent = 2;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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酒店预订列表筛选

筛选下拉框使用 SizeTransition 和 FadeTransition 组件实现下拉动画效果。
在这里插入图片描述

// 筛选下拉框
if(dropdownVisible)
Positioned(
  top: dropdownOffset,
  height: MediaQuery.of(context).size.height - dropdownOffset,
  width: MediaQuery.of(context).size.width,
  child: ScrollConfiguration(
    behavior: CustomScrollBehavior(),
    child: Material(
      color: Colors.transparent,
      child: Column(
        children: [
          SizeTransition(
            sizeFactor: animation, // 高度展开动画
            axis: Axis.vertical, // 垂直方向展开
            child: Container(
              color: Colors.white,
              width: double.infinity,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if(dropdownIndex == 0)
                  dropOption1(),
                  if(dropdownIndex == 1)
                  dropOption2(),
                  if(dropdownIndex == 2)
                  dropOption3(),
                  if(dropdownIndex == 3)
                  dropOption4(),
                ],
              ),
            ),
          ),
          Expanded(
            child: FadeTransition(
              opacity: animation,
              child: GestureDetector(
                child: Container(
                  color: Colors.black54,
                ),
                onTap: () {
                  setState(() {
                    closeDropdown();
                  });
                },
              ),
            ),
          ),
        ],
      ),
    ),
  ),
),

flutter3客服消息模块

在这里插入图片描述
消息聊天模块，这部分功能是之前开发的一款flutter3.x仿微信app聊天功能的精简版。

flutter3+dart3聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈

在这里插入图片描述
以上就是flutter3.x+dart3实战酒店预订app系统的一些分享，希望对大家有所帮助~

过往热门实战项目实例

在这里插入图片描述

getx的使用场景，详细举例
qq_28563283的博客
05-18 2592
Getx的状态管理功能可以帮助我们更加方便地管理Flutter应用程序中的状态，从而提高开发效率和代码质量。
Flutter 3.27 发布啦，快来看有什么更新吧
恋猫de小郭的博客
12-12 2289
可以看到 Flutter 3.27 包含了大量更新，虽然依然还没看到 PC 端的一些新发布，但是其实之前我们聊过，例如在之前的《Flutter PC 多窗口新进展》我们就聊过了多窗口目前的落地和演示情况，同时如《Flutter 终于正式规划 IDE Widget 预览支持》，也大概看到可 Flutter 在 IDE 预览支持的进展。可以看到，许多新老的 feature 落地时间应该会在 2025 第一季度或者第二季度，所以，3.27 你打算吃螃蟹了？还是等 3.27.6？
flutter3.27+dart3+getx高仿抖音app商城系统演示版
码农ICoding
02-08 422
flutter3_douyin_mall基于最新跨平台技术flutter3.27开发手机端仿抖音电商app商城实战项目。
深入理解 Getx：GetView、GetxController、GetX Binding 与生命周期函数
最新发布
m0_57836225的博客
03-11 717
Getx 是一个轻量级且高性能的 Flutter 库，它集成了状态管理、路由管理、依赖注入等多种功能。通过 Getx，开发者可以更轻松地管理应用的状态，实现页面间的高效导航，以及进行依赖的注入和管理，减少样板代码的编写。Getx 库中的 GetView、GetxController、GetX Binding 以及控制器的生命周期函数为 Flutter 开发者提供了一套高效、便捷的状态管理和依赖注入解决方案。通过合理运用这些特性，我们可以减少代码的复杂性，提高应用的性能和可维护性。
Flutter旅游出行类APP常用的第三方库总汇
smileKH的博客
06-09 1081
旅游出行类APP为用户提供了探索世界、规划旅程和预订服务的便捷方式。Flutter作为一个流行的跨平台移动应用开发框架，为这类应用的开发提供了强大的支持。本文将汇总Flutter旅游出行类APP开发中常用的第三方库，帮助开发者构建功能丰富、用户体验优秀的旅游出行应用。
Flutter 3.27 中的新功能
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
12-12 1835
CupertinoCheckbox此版本包括对和 的高保真更新CupertinoRadio，包括对大小、颜色、笔触宽度和按下时的行为的更新。创建新的 Objective-C iOS 项目现已弃用，并且该flutter create --ios-language objc标志将在未来的 Flutter 版本中被删除。此版本增加了将网络数据导出为文件的支持.har，以及在 DevTools 未连接到正在运行的应用时将内存快照加载到 DevTools 以供查看的支持。这改善了筹码和按钮之间的视觉层次。
Flutter开发之——getX-快速入门(01)
热门推荐
我的博客
04-29 1万+
一 概述 GetX是Flutter的一个快速开发框架，借助GetX可以极大提高Flutter的开发速度和效率，它支持： 反应式状态管理OBS(之前通过setState设置) 路由管理(之前通过Navigator跳转) 依赖管理(设置过Get.put(Controller)可以获取到Controller实例化) 实用工具箱(国际化、切换主题、网络连接设置、GetPage中间件、高级API、本地状态组件、状态混合、测试等) 后续将分章节进行讲解，本文为GetX快速入门，让你对GetX有个了解 二 GetX
Flutter+getx+dart+使用getx实现鉴权
07-19
在 Flutter 中，使用 GetX 可以很方便地实现中间件鉴权（Authentication）。中间件可以在导航之前拦截路由请求，并进行相应的处理，例如检查用户是否已登录。如果未登录，则可以重定向到登录页面。 这个demo是通过...
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
分享课程——基于Flutter 3.x 实战跨平台仿抖音App混合开发，完整版视频课程下载。 Flutter 3已发布，跨平台支持性更好。本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的...
Flutter+Flutter+Getx+GetX中路由管理用法，跟博客一起的Demo
10-31
Flutter可以使用Dart编程语言进行应用开发。Flutter具有强大的组件库，使得开发者可以快速地构建美观的用户界面。此外，Flutter还支持热重载，这意味着开发者在编辑代码后可以迅速看到更新效果，极大地提高了开发...
移动端国际化+flutter+Flutter getx+GetX实现国际化
07-16
Flutter使用GetX框架实现国际化的Demo.具体的文章可以查看：https://blog.csdn.net/ZCC361571217/article/details/140390890?spm=1001.2014.3001.5502
项目基于Flutter+Dart技术开发，构建跨平台移动应用程序 模拟盒马生鲜APP(毕设&课设&实训&大作业&竞赛&项目)
09-19
项目基于Flutter+Dart技术开发，构建跨平台移动应用程序。模拟盒马生鲜APP，包含首页模块、商品展示和搜索模型、购物车模型、订单管理、个人中心、促销活动、客户服务中心、用户评价等功能。后端的主要技术架构是...
Flutter：getX的学习
weixin_41897680的博客
08-30 2243
Flutter：getX的学习
深入浅出 GetX：超详细实用指南，全方位掌握 Flutter 开发利器第一篇之路由管理篇
我叫柱子哥
03-16 8103
正如Get官方介绍，GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX 有3个基本原则：性能： GetX 专注于性能和最小资源消耗。效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。结构： GetX 可以将界面、逻辑、依赖和路由之间低耦合,逻辑更清晰，代码更容易维护。这篇文章主要是介绍下GetX的用法。
Flutter 笔记 | GetX
川峰的博客
06-06 3103
现在Flutter的状态管理方案很多，redux、bloc、state、provider、Getx。 provider是官方提供的状态管理解决方案，主要功能就是状态管理。Getx是第三方的状态管理插件，不仅具有状态管理的功能，还具有路由管理、主题管理、国际化多语言管理、Obx局部更新、网络请求、数据验证等功能，相比其他状态管理插件Getx 简单、功能强大并且高性能。 简单来讲，GetX相比原始和其他方案的最大优点就是使用简单方便，功能丰富，且提供从头到脚的全家桶式的功能API。 GetX 主要有三大主要功能
Flutter 状态管理之GetX库
晨曦
01-22 6433
Flutter使用的是声明式UI，是通过状态去更新UI组件的，因此我们首先就要学习状态的使用。同样为了简化原本的状态使用，我们会使用Getx库。
节点和通行证js github认证
weixin_26714477的博客
10-11 451
As a developer, It’s very often we would have used Github accounts to login to a web application. The process would have been so simple. This blog will explain to you how to implement Github authentic...
Flutter状态管理--GetX的简单使用
建古的编码生活
06-26 4604
一、前言 Flutter开发，就需要对各种状态的管理，就是在请求数据的时候需要实时变化，各种交互变化等，在没有使用GetX之前使用Provider,用Provider的时候觉得真香，挺方便的，需要刷新的时候直接 notifyListeners(); 用了GetX之后觉得Provider太繁琐了。这边介绍下GetX的使用以及常用的方法。 二、 GetX GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。 1、相关优势： 1、轻量，可以模块单独编译，没
GetX中一些非常有用的组件(GetView, GetWidget、GetxService)
我叫柱子哥
10-31 1818
这篇文章主要介绍下GetView、GetWidget、GetService的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值