Flutter仿Boss-2.启动页、引导页

简述

在移动应用开发中，启动页和引导页是用户初次接触应用时的重要组成部分，能够提升用户体验和导航用户了解应用功能。本文将介绍如何使用Flutter实现启动页和引导页，并展示相关代码实现。

启动页

启动页是应用的第一个页面，首次进入需要进入应用引导页面，非首次进入欢迎界面（广告界面），所以我们需要保存是否首次进入APP，这里采用：

shared_preferences: ^2.2.2

我们可以定义一个工具类SpUtil

/// 键值对 key
class SPKey{
  static const String isFirstOpen = 'isFirstOpen';
}

/// 键值对存储
class SpUtil {
  ///是否第一次打开
  static bool isFirstOpen() {
    SharedPreferences sp = Get.find<SharedPreferences>();
    return sp.getBool(SPKey.isFirstOpen) ?? true;
  }

  /// 已打开APP
  static void appIsOpen() {
    Get.find<SharedPreferences>().setBool(SPKey.isFirstOpen, false);
  }
}

这里配合了Getx一起使用了。
然后在启动页里判断是否是首次来切换是欢迎界面还是引导页面。

/// 启动页面-欢迎界面/引导页面
class SplashPage extends StatelessWidget {
  const SplashPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(375, 812));
    var child = SpUtil.isFirstOpen() ? const GuidePage() : const WelcomePage();
    return Scaffold(
      body: child,
      resizeToAvoidBottomInset: false,
    );
  }
}

欢迎界面

欢迎界面通常用于展示应用的logo或者欢迎界面。在我们的Flutter项目中，我们通过WelcomePage来实现启动页功能。

效果

代码

/// 欢迎页面
class WelcomePage extends StatelessWidget {
   
   
  const WelcomePage({
   
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
   
    final logic = Get.put(WelcomeLogic());
    return WillPopScope(
      onWillPop: () {
   
   
        return Future.value(false);
      },
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              color: const Color(0xFF40C2BB),
              width: double.infinity,
              height: double.infinity,
              child: Image.asset(
                R.splash_bg_jpg,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Obx(
            () => Positioned(
              right: 16.w,
              top: 30.w,
              child: InkWell(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 3.w),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white, width: 1.w),
                    borderRadius: BorderRadius.all(Radius.circular(8.w)),
                  ),
                  child: Text(
                    logic.state.adStr.value,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
                onTap: () {
   
   
                  logic.openHomePage();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}