1.Flutter 列表选择器插件

1. 推荐插件：azlistview

Flutter 城市列表、联系人列表，索引&悬停。基于scrollable_positioned_list.AzListView, SuspensionView, IndexBar.

Features

轻松创建城市列表或联系人列表界面。

列表项按A-Z分组。

带有悬停效果Header。

支持自定义Header。

支持索引联动。

IndexBar支持自定义样式。

IndexBar支持本地图片。

允许滚动到列表中的特定项目。

GitHub展示效果：

2.中国的城市三级联动选择器

flutter插件： city_pickers 1.0.1

Demo展示：

在代码中使用：

效果如下：

2.Flutter加载url插件

webview_flutter 2.3.1

具体使用可参考官方sample：https://github.com/flutter/plugins/blob/master/packages/webview_flutter/webview_flutter_android/example/lib/main.dart

**在代码中使用：**加载一个h5页面

3.自定义动画Widget

1.定义一个动画Widget完整代码

///语音输入界面
///flutter 动画知识：https://book.flutterchina.club/chapter9/intro.html
class SpeakPage extends StatefulWidget {const SpeakPage({Key? key}) : super(key: key);@override_SpeakPageState createState() => _SpeakPageState();
}class _SpeakPageState extends State<SpeakPage>with SingleTickerProviderStateMixin {String speakTips = '长按说话';String speakResult = '';///它主要的功能是保存动画的插值和状态late Animation<double> animation;///用于控制动画，它包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法。AnimationController会在动画的每一帧，就会生成一个新的值late AnimationController _controller;///通过CurvedAnimation来指定动画的曲线: easeIn:开始慢，后面快  linear:匀速的  decelerate:匀减速@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 1000));animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn)..addStatusListener((status) {///它可以给Animation添加“动画状态改变”监听器；动画开始、结束、正向或反向（见AnimationStatus定义）时会调用状态改变的监听器。if (status == AnimationStatus.completed) {_controller.reverse();} else if (status == AnimationStatus.dismissed) {_controller.forward();}});}@overrideWidget build(BuildContext context) {return Scaffold(body: Container(padding: const EdgeInsets.all(30),child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [_topItem,_bottomItem,],),),),);}@overridevoid dispose() {_controller.dispose();super.dispose();}/// 开始录音void _speakStart() {_controller.forward();setState(() {speakTips = '识别中...';});}///结束录音void _speakStop() {setState(() {speakTips = '长按说话';});_controller.reset();_controller.stop();}/// 顶部 itemWidget get _topItem {return Column(children: <Widget>[const Padding(padding: EdgeInsets.fromLTRB(0, 30, 0, 30),child: Text('你可以这样说',style: TextStyle(fontSize: 16, color: Colors.black54),),),const Text('故宫门票\n北京一日游\n迪士尼乐园',textAlign: TextAlign.center,style: TextStyle(fontSize: 15,color: Colors.grey,)),Padding(padding: const EdgeInsets.all(20),child: Text(speakResult,style: const TextStyle(color: Colors.blue),),)],);}/// 底部 itemWidget get _bottomItem {return FractionallySizedBox(widthFactor: 1,child: Stack(children: <Widget>[GestureDetector(onTapDown: (e) {_speakStart();},onTapUp: (e) {_speakStop();},onTapCancel: () {_speakStop();},child: Center(child: Column(children: <Widget>[Padding(padding: const EdgeInsets.all(10),child: Text(speakTips,style: const TextStyle(color: Colors.blue, fontSize: 12),),),Stack(children: <Widget>[const SizedBox(//占坑，避免动画执行过程中导致父布局大小变得height: MIC_SIZE,width: MIC_SIZE,),Center(child: AnimatedMic(animation: animation,),)],)],),),),Positioned(right: 0,bottom: 20,child: GestureDetector(onTap: () {Navigator.pop(context);},child: const Icon(Icons.close,size: 30,color: Colors.grey,),),)],),);}
}const double MIC_SIZE = 80;/// 圆球动画
class AnimatedMic extends AnimatedWidget {static final _operateTween = Tween<double>(begin: 1, end: 0.5);static final _sizeTween = Tween<double>(begin: MIC_SIZE, end: MIC_SIZE - 20);const AnimatedMic({Key? key,required Animation<double> animation,}) : super(key: key, listenable: animation);@overrideWidget build(BuildContext context) {final animation = listenable as Animation<double>;return Opacity(opacity: _operateTween.evaluate(animation),child: Container(height: _sizeTween.evaluate(animation),width: _sizeTween.evaluate(animation),decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(MIC_SIZE / 2)),child: const Icon(Icons.mic,color: Colors.white,size: 30,),),);}
}

4.整个项目运行效果

项目地址：https://github.com/Lentolove/flutter_ctrip_travel

课程中国还有未实现的功能：

未接入百度ASR，即flutter调用android和ios的百度asr中的sdk。

整个课程主要是对Flutter基础控件的了解和使用，课程深度一般，如果需要这个学习视频的可以私聊我。

Flutter开发学习课程携程app开发(完)相关推荐

Flutter开发学习课程携程app开发(一)
引言数据来源mooc网学习视频课程. 1.页面数据 1.数据展示接口地址: json 格式对应的数据界面展示效果: 2.数据请求应用Dio进行数据请求:home_dao.dart 在配置文件 ...
Flutter开发学习课程携程app开发(三)
1.效果展示需要实现的功能: 自定义一个 SearchBar, 它在主页和搜索页会呈现不同的状态显示. 在搜索框中无输入的时候显示一个语音小图标,有输入的时候显示一个清除图标. 在 HomePage ...
Flutter开发学习课程携程app开发(二)
1.旅拍界面展示 2.界面布局顶部是 TabBar 配合 TabBarView 实现页面滑动翻页 TabBarView 用 Flexible 包裹 Flexible 包裹充满整个页面内容区部分采用 ...
RN开发实践——仿携程App（二）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(一) 实现首页的轮播图 Swiper简介 The best Swiper component for React Native.Swi ...
RN开发实践——仿携程App（三）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(二) 实现首页中间的内容栏今天实现首页中间的内容栏,原效果如下: 红框就是今天需要实现的内容这里可以拆解成四个部分,每个部分都是由 ...
RN开发实践——仿携程App（一）
文章最后附上项目地址. 1.新建项目在控制台执行下面命令( 前提是已经搭建好react-native的开发环境 ): react-native init XieCheng // XieCheng 是 ...
干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
作者简介 Deway,携程资深工程师,iOS客户端开发,热衷于大前端和动态化技术: Frank,携程高级工程师,关注移动端热门技术,安卓客户端开发. 前言随着各种多端技术的蓬勃发展,如今的移动端和前 ...
3星|《大产品，小团队》：携程软件开发流程改进的故事
大产品,小团队:携程敏捷技术与管理转型实战携程集团创作,作者有产品.开发.测试.PMO等多种角色.有一点比较怪异,每个章节的作者是放在书的最后部分的. 主要内容是携程的软件开发流程改进的故事.携程的 ...
php携程线程,携程api开发解决方法
携程api开发本帖最后由 lziyanl 于 2014-06-03 13:53:29 编辑如何获取上图的内容信息?在携程没找到对应接口,询问官方群,基本不搭理! ------解决方案------- ...

Flutter开发学习课程携程app开发(完)