企业官网建设流程全解析

• 示例工程
• 移动开发

本文以 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()中向List<Slide>依次添加了三屏内容：

List<Slide> 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最常用的几个字段：

可以看到示例为三屏分别选择了橙色、深蓝、紫色三种背景，配合不同配图形成清晰的视觉区隔。这种「纯数据声明」的写法正是intro_slider的易用性所在：调整欢迎页内容只需增删Slide、修改字段值，滑动、分页等行为完全由库内部处理。

四、从入口到欢迎页：完整的运行链路

整个示例的运行链路非常短，由三个文件串联：

1. 入口文件 main.dart：main()中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(), ); } }

2. 欢迎页组件 intro_slider_demo.dart 中的SliderScreen：这是一个StatefulWidget，build()中把slides列表连同两个回调直接交给IntroSlider：

@override Widget build(BuildContext context) { return IntroSlider( slides: this.slides, onDonePress: this.onDonePress, onSkipPress: this.onSkipPress, ); }

onDonePress在用户滑完最后一屏并点击完成按钮时触发，onSkipPress在用户点击跳过按钮时触发。示例中两者的行为完全一致，都是跳转到主页。

3. 主页 home_screen.dart 中的MyHomePage：一个带计数器按钮的标准Scaffold页面，作为欢迎页跳转后的目标页，用于验证「欢迎页只出现一次」的效果。

五、核心技巧：用 pushAndRemoveUntil 让欢迎页只显示一次

这是 slider_screen 文档 特意标注「注意」的重点：欢迎页显示完就不应再看到它。如果使用普通的Navigator.push，欢迎页会一直保留在路由栈中，用户从主页按返回键时会重新回到欢迎页——这对「一次性引导」场景显然是错误的体验。

示例的解决办法是在跳转时使用Navigator.of(context).pushAndRemoveUntil：

void 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/colorEnd+directionColorBegin/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保证引导页只出现一次。四步走完，一个体验合格的欢迎页即可落地；如需深度定制，源码中保留的注释示例（按钮、指示点、渐变背景、文字样式）给出了现成的参数参考，可直接照搬使用。

• 示例工程
• 移动开发