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:
是否已登录:跳转首页
否则:跳转登陆页
相关推荐
lumi.1 小时前
Vue + Element Plus 实现AI文档解析与问答功能(含详细注释+核心逻辑解析)
前端·javascript·vue.js·人工智能
S***t7142 小时前
Vue面试经验
javascript·vue.js·面试
Just_Paranoid3 小时前
【MQTT】基于 Android 设备接入物联网平台最佳实践
android·mqtt·eclipse·iot·paho·mqtt.fx
粉末的沉淀3 小时前
css:制作带边框的气泡框
前端·javascript·css
p***h6434 小时前
JavaScript在Node.js中的异步编程
开发语言·javascript·node.js
N***73854 小时前
Vue网络编程详解
前端·javascript·vue.js
q***38516 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
alexhilton6 小时前
深入理解withContext和launch的真正区别
android·kotlin·android jetpack
Nan_Shu_6146 小时前
学习:Sass
javascript·学习·es6
WYiQIU7 小时前
面了一次字节前端岗,我才知道何为“造火箭”的极致!
前端·javascript·vue.js·react.js·面试