(1)Flutter记录之启动页

Posted 2023-05-09

参考技术A 一年半前玩过flutter，忘光光...现在是时候重新拾取了。~

启动页一般只放图片或者加几行文字。

1、创建好flutter项目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目录下新建images文件夹，如已有直接放入图片

3、flutter_yijiake.iml中加入注入该图片，并注意空格

4、在根目录下的test/widget_test.dart中更改默认的启动页为当前的启动页路径

5、最后重新设置启动时的页面

6、非常简单的启动页面放logo图片

值得一说的是，flutter框架的UI组件需要已new 组件的形式展开。

Flutter学习日记之PageView+Indicator指示器实现引导页

本文地址：https://blog.csdn.net/qq_40785165/article/details/118400571,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

天下事以难而废者十之一，以惰而废者十之九

本次给大家分享的是如何用Flutter中的PageView组件配合Indicator指示器实现常见的App引导页，源码地址：https://gitee.com/fjjxxy/flutter-study.git,效果如下：

(一)PageView介绍

PageView用来实现一个可以显示的逐页滑动的列表，基本参数如下：

参数	说明
scrollDirection	滑动的方向
reverse	children是否反过来
controller	控制器，可以定义初始索引、是否沾满屏幕等
onPageChanged	页面变化的监听
children	页面集合
pageSnapping	页面是否会自动返回上一页/翻页等效果，设置为false便不会有这些效果

代码如下：

          PageView(
            scrollDirection: Axis.horizontal,
            reverse: false,
            onPageChanged: (index) {
              setState(() {
                _index = index;
              });
            },
            controller: PageController(
                initialPage: 0, keepPage: false, viewportFraction: 1),
            pageSnapping: true,
            physics: ClampingScrollPhysics(),
            children: [
              Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                            "assets/images/image_guide_2.jpg"),
                        fit: BoxFit.fill)),
              ),
              Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                            "assets/images/image_guide_1.jpg"),
                        fit: BoxFit.fill)),
              ),
              Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                            "assets/images/image_guide_3.jpg"),
                        fit: BoxFit.fill)),
                child: Stack(
                  alignment: Alignment.bottomCenter,
                  children: [
                    Positioned(
                        bottom: 100,
                        child: ElevatedButton(
                            onPressed: () {
                              Navigator.pushNamed(context, "/main");
                            },
                            style: ButtonStyle(
                                backgroundColor:
                                    MaterialStateProperty.all(Colors.white),
                                foregroundColor:
                                    MaterialStateProperty.all(Colors.black),
                                shape: MaterialStateProperty.all(
                                    RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(10))),
                                side: MaterialStateProperty.all(
                                    BorderSide(color: Colors.white))),
                            child: Text("开启Flutter学习之旅")))
                  ],
                ),
              )
            ],
          )

（二）指示器

Demo中用到的指示器插件是dots_indicator
添加依赖：

dots_indicator: ^2.0.0

引入：

import 'package:dots_indicator/dots_indicator.dart';

基本参数如下：

参数	说明
dotsCount	指示器数量
position	当前的位置
decorator	指示器的样式
reversed	是否反过来
mainAxisAlignment	对齐方式

代码如下：

 DotsIndicator(
                  mainAxisAlignment: MainAxisAlignment.center,
                  reversed: false,
                  dotsCount: 3,
                  position: _index.toDouble(),
                  decorator: DotsDecorator(
                    color: Colors.black87, // Inactive color
                    activeColor: Colors.redAccent,
                  ))

使用Stack+Positioned就可以完成布局中组件的摆放了，很简单的一个页面需求，因为很经常被使用，所以记录下来，本次PageView组件配合Indicator指示器实现App引导页的内容就介绍完了，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!