示例工程移动开发【免费下载链接】Flutter-NotebookFlutterDemo合集今天你fu了吗项目地址https://gitcode.com/gh_mirrors/fl/Flutter-Notebook点击查看免费下载本文以 Flutter-Notebook 仓库中mecury_project/example/slider_screen示例为核心讲解如何使用intro_slider第三方库在几分钟内完成 APP 欢迎页引导页开发并重点剖析「欢迎页展示完毕后不再出现」的关键实现——Navigator.pushAndRemoveUntil的路由清理机制。读完本文你将掌握欢迎页的数据建模、资源注册、滑动交互接入以及一套完整可复用的引导页→主页跳转方案。slider_screen 欢迎页示例截图一、示例定位为什么欢迎页值得用 intro_slider该项目中的 slider_screen 文档 开篇就点明了示例的定位这是一个基于intro_slider库实现的 APP 欢迎页 Demo。欢迎页Onboarding / Intro Slider是绝大多数 APP 首次启动时展示产品亮点的页面通常由多屏滑动、跳过按钮、完成按钮与指示点组成。文档给出的核心结论是intro_slider让欢迎页的「制作变得十分简单」——开发者无需手写PageView、PageController、指示点动画等大量样板代码只需声明每一屏的Slide数据模型再传入少量回调即可。仓库源码完整印证了这一结论intro_slider_demo.dart 中全部欢迎页逻辑仅由一份Slide列表加上IntroSlider组件构成没有任何手写滑动逻辑。二、依赖与资源准备pubspec.yaml 中的两处关键配置要让项目跑起来首先需要在 pubspec.yaml 中完成两件事1. 引入intro_slider依赖dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 intro_slider: ^1.0.6示例锁定的是intro_slider: ^1.0.6^前缀表示允许兼容的 1.0.x 版本更新SDK 约束为sdk: 2.0.0-dev.68.0 3.0.0这是该示例编写时的 Flutter 早期版本环境你在新版本 Flutter 中运行时若遇到 API 变更以所选intro_slider版本的实际导出为准。2. 在flutter段注册欢迎页所需图片资源flutter: uses-material-design: true assets: - assets/images/flutter.png - assets/images/dart.png - assets/images/flutterlogo.png这三张图片分别对应欢迎页三屏的配图实际文件位于 assets/images/ 目录。Flutter 中assets列表逐条声明的路径是严格匹配的——Slide.pathImage中填写的字符串必须与这里注册的路径保持一致否则运行时会出现资源找不到的问题。三、欢迎页数据建模Slide 列表与三屏内容欢迎页的每一屏在 intro_slider_demo.dart 中被建模为一个Slide对象。示例在initState()中向ListSlide依次添加了三屏内容ListSlide slides new List(); override void initState() { super.initState(); slides.add( new Slide( title: FLUTTER, description: Get Faster Development, Flexible UI Access Native Features. Learn More! High-Quality Interfaces. Flexible UI. Fast Development., pathImage: assets/images/flutter.png, backgroundColor: 0xfff5a623, ), ); slides.add( new Slide( title: DART, description: Developers at Google and elsewhere use Dart to create high-quality, mission-critical apps for iOS, Android, and the web. ..., pathImage: assets/images/dart.png, backgroundColor: 0xff203152, ), ); slides.add( new Slide( title: WELECOME, description: 开始你的app, pathImage: assets/images/flutterlogo.png, backgroundColor: 0xff9932CC, ), ); }从该示例可以归纳Slide最常用的几个字段字段作用示例取值title该屏的大标题文本FLUTTER、DART、WELECOMEdescription标题下方的说明文案支持中英文开始你的apppathImage配图路径需与pubspec.yaml中注册的 asset 一致assets/images/flutter.pngbackgroundColor该屏的背景色0xff开头的 32 位 ARGB 色值0xfff5a623可以看到示例为三屏分别选择了橙色、深蓝、紫色三种背景配合不同配图形成清晰的视觉区隔。这种「纯数据声明」的写法正是intro_slider的易用性所在调整欢迎页内容只需增删Slide、修改字段值滑动、分页等行为完全由库内部处理。四、从入口到欢迎页完整的运行链路整个示例的运行链路非常短由三个文件串联入口文件 main.dartmain()中runApp(MyApp())MyApp是一个标准的MaterialApp关键在home: SliderScreen()——应用启动后首先进入的就是欢迎页组件。void main() runApp(MyApp()); class MyApp extends StatelessWidget { override Widget build(BuildContext context) { return new MaterialApp( title: Flutter Demo, theme: new ThemeData(primarySwatch: Colors.blue), home: SliderScreen(), ); } }欢迎页组件 intro_slider_demo.dart 中的SliderScreen这是一个StatefulWidgetbuild()中把slides列表连同两个回调直接交给IntroSlideroverride Widget build(BuildContext context) { return IntroSlider( slides: this.slides, onDonePress: this.onDonePress, onSkipPress: this.onSkipPress, ); }onDonePress在用户滑完最后一屏并点击完成按钮时触发onSkipPress在用户点击跳过按钮时触发。示例中两者的行为完全一致都是跳转到主页。主页 home_screen.dart 中的MyHomePage一个带计数器按钮的标准Scaffold页面作为欢迎页跳转后的目标页用于验证「欢迎页只出现一次」的效果。五、核心技巧用 pushAndRemoveUntil 让欢迎页只显示一次这是 slider_screen 文档 特意标注「注意」的重点欢迎页显示完就不应再看到它。如果使用普通的Navigator.push欢迎页会一直保留在路由栈中用户从主页按返回键时会重新回到欢迎页——这对「一次性引导」场景显然是错误的体验。示例的解决办法是在跳转时使用Navigator.of(context).pushAndRemoveUntilvoid onDonePress() { Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute( builder: (context) MyHomePage( title: home page, )), (route) route null); } void onSkipPress() { Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute( builder: (context) MyHomePage( title: home page, )), (route) route null); }pushAndRemoveUntil的签名是pushAndRemoveUntil(newRoute, predicate)它会先根据predicate逐条清理当前路由栈中满足条件的路由再推入newRoute。示例中谓词写为(route) route null因为Route对象永远不会为null这个谓词等价于「移除栈内所有路由」最终路由栈中只剩下新推入的MyHomePage。由此带来的效果欢迎页跳转后从主页按系统返回键不会回到欢迎页栈中已无欢迎页再次冷启动 APP 时欢迎页依然会展示满足「首次使用展示引导」的产品诉求。与之对比如果改用Navigator.push欢迎页会残留在栈底返回时即可复现「回到欢迎页」的问题——这正是 README 中「显示完了之后就不要再看到它了」这句话背后的工程考量。六、进阶源码中保留的自定义配置示例值得留意的是intro_slider_demo.dart 顶部保留了一大段被注释掉的「Custom config」示例代码它完整展示了IntroSlider与Slide在定制场景下的扩展能力是理解该库参数体系的最佳参考。摘录核心配置项如下Slide的样式级字段new Slide( title: SCHOOL, styleTitle: TextStyle( color: Color(0xffD02090), fontSize: 30.0, fontWeight: FontWeight.bold, fontFamily: RobotoMono), description: ..., styleDescription: TextStyle( color: Color(0xffD02090), fontSize: 20.0, fontStyle: FontStyle.italic, fontFamily: Raleway), pathImage: images/photo_school.png, colorBegin: 0xffFFDAB9, colorEnd: 0xff40E0D0, directionColorBegin: Alignment.topLeft, directionColorEnd: Alignment.bottomRight, )styleTitle/styleDescription分别定制标题与说明文字的字体、字号、颜色、字重等TextStyle属性colorBegin/colorEnddirectionColorBegin/directionColorEnd为该屏指定渐变背景的起止色值与渐变方向Alignment.topLeft→Alignment.bottomRight即从左上到右下实现比纯色背景更丰富的视觉效果。IntroSlider的交互定制参数new IntroSlider( slides: this.slides, // 跳过按钮 renderSkipBtn: this.renderSkipBtn(), onSkipPress: this.onSkipPress, colorSkipBtn: 0x33000000, highlightColorSkipBtn: 0xff000000, // 下一步 / 完成按钮 onDonePress: this.onDonePress, renderNextBtn: this.renderNextBtn(), renderDoneBtn: this.renderDoneBtn(), colorDoneBtn: 0x33000000, highlightColorDoneBtn: 0xff000000, // 底部指示点 colorDot: 0x33D02090, colorActiveDot: 0xffD02090, sizeDot: 13.0, )renderSkipBtn/renderNextBtn/renderDoneBtn分别传入自定义 Widget 替换默认的跳过、下一步、完成按钮示例中使用了Icons.skip_next、Icons.navigate_next、Icons.done三个图标colorSkipBtn/colorDoneBtn与highlightColorSkipBtn/highlightColorDoneBtn控制按钮常态与高亮按下/聚焦状态的颜色色值同样为 ARGB 格式如0x33000000表示带透明度的黑色colorDot/colorActiveDot/sizeDot控制底部指示点小圆点的普通色、当前页高亮色与直径。从源码结构看这套参数体系足以覆盖绝大多数欢迎页的定制需求换文案、换图、换背景渐变、换按钮图标、换指示点样式全部无需改动库本身也不用手写任何手势与动画代码。七、本地运行与效果验证该示例与仓库内其他 Flutter 示例一样是完整的独立工程可按标准 Flutter 项目流程运行# 进入示例目录 cd mecury_project/example/slider_screen # 拉取依赖含 intro_slider 与本地图片资源 flutter pub get # 运行到已连接的设备/模拟器 flutter run启动后你会看到三屏欢迎页依次滑动展示FLUTTER → DART → WELECOME。验证「一次性跳转」的方式很简单滑到最后一屏点击完成或直接点击跳过进入主页后按系统返回键——由于 intro_slider_demo.dart 中pushAndRemoveUntil已清空路由栈你不会再回到欢迎页这正是欢迎页场景期望的标准行为。八、小结slider_screen示例为 Flutter 欢迎页开发提供了一个简洁完整的范本用 pubspec.yaml 声明依赖与资源、用Slide列表声明内容、用IntroSlider组件渲染交互、用pushAndRemoveUntil保证引导页只出现一次。四步走完一个体验合格的欢迎页即可落地如需深度定制源码中保留的注释示例按钮、指示点、渐变背景、文字样式给出了现成的参数参考可直接照搬使用。赞分享示例工程移动开发【免费下载链接】Flutter-NotebookFlutterDemo合集今天你fu了吗项目地址https://gitcode.com/gh_mirrors/fl/Flutter-Notebook点击查看免费下载相关推荐终极指南使用SearchAll高效发现敏感信息泄露的3种方法终极指南使用SearchAll高效发现敏感信息泄露的3种方法 SearchAll 是一款专注于敏感信息扫描的开源工具采用Go语言开发能够快速识别服务器中的网络安全应用安全渗透测试mokuro新手上路日语学习者必备的漫画阅读工具使用指南mokuro新手上路日语学习者必备的漫画阅读工具使用指南 mokuro是一款专为日语学习者打造的漫画阅读工具它能让你在浏览器中阅读日语漫画时轻松选择和查看文深度学习计算机视觉Flutter 路由实战指南Navigator 跳转、命名路由与数据传递全示例解析Flutter 路由实战指南Navigator 跳转、命名路由与数据传递全示例解析 导读 本文以 Flutter learning 开源仓库中 路由使用 D示例工程上一篇从零开始使用Mermaid绘制软件架构图实战指南下一篇Mermaid文本绘图工具全指南从安装到架构可视化的实践教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考