Flutter:启动屏逻辑处理02:启动页

启动屏启动之后,制作一个启动页面

新建splash:view

视图中只有一张图片sliding.png就是我们的启动图

js 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';
class SplashPage extends GetView<SplashController> {
  const SplashPage({Key? key}):super(key: key);
  // 主视图
  Widget _buildView() {
    return const Image(image: AssetImage('images/sliding.png'));
  }
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SplashController>(
      init: SplashController(),
      id: "splash",
      builder: (_) {
        return Scaffold(
          // SafeArea():安全区域,删除后页面顶到顶部
          body: _buildView(),
        );
      },
    );
  }
}

main入口路由配置

js 复制代码
initialRoute: '/splashPage',

启动后会默认先展示前一章自定义的APP启动图标,之后便会进入启动图页。

启动图页面也可以加一些跳转的逻辑,

haskell 复制代码
第一次启动APP:跳转欢迎页
第二次启动APP:
是否已登录:跳转首页
否则:跳转登陆页
相关推荐
子琦啊15 小时前
【算法复习】数组与双指针篇
javascript·算法
小雨天気.15 小时前
Flutter 框架跨平台鸿蒙开发 - 直觉训练器应用
flutter·华为·harmonyos
SuperEugene15 小时前
前端通用基础组件设计:按钮/输入框/弹窗,统一设计标准|组件化设计基础篇
前端·javascript·vue.js·架构
范什么特西15 小时前
web练习
java·前端·javascript
吃西瓜的年年15 小时前
react(三)action 表单
前端·javascript·react.js
我命由我1234516 小时前
在 React 项目中,可以执行 npm start 命令,但是,无法执行 npm build 命令
前端·javascript·vue.js·react.js·前端框架·json·ecmascript
浮芷.16 小时前
Flutter 框架跨平台鸿蒙开发 - 姿势纠正助手应用
科技·flutter·华为·harmonyos·鸿蒙
一直在想名16 小时前
Flutter 框架跨平台鸿蒙开发 - 影子收藏家
flutter·华为·harmonyos
aidou131416 小时前
Vue3自定义实现日期选择器(可单选或多选)
前端·javascript·vue.js·日期选择器·transition
早點睡39016 小时前
Flutter for OpenHarmony三方库适配实战:palette_generator 图片调色板提取
flutter