时间戳

首页 > 解决方案 > 在显示演练之前显示主屏幕

flutter - 在显示演练之前显示主屏幕

问题描述

我正在尝试实现在系统首次启动时显示的演练屏幕。

在 initState 中使用 shared_preference 包来判断是否是第一次启动。

当我执行以下代码（简化）时，它会转换到 waklThrou 屏幕，但会暂时显示主屏幕。

你有什么好主意吗？

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutterapp/ui/pages/walk/walk_through_page.dart';
import 'package:shared_preferences/shared_preferences.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      final prefs = await SharedPreferences.getInstance();
      if (prefs.getBool('isFirstLaunch') ?? true) {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => WalkThroughPage()),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (ctx, watch, _) {
        return WillPopScope(
            onWillPop: () async => false,
            child: Scaffold(
              appBar: AppBar(),
              body: Container(
                decoration: new BoxDecoration(
                  image: new DecorationImage(
                    image: AssetImage('images/back_ground.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(child: Text('Home')),
              ),
            ));
      },
    );
  }
}

标签： flutterdart

解决方案

由于WidgetsBinding.instance.addPostFrameCallback是回调，因此将传递该代码并执行构建方法。

一旦调用回调，导航器将推送新屏幕。

避免主屏幕显示的一种简单解决方案是在正文中添加一个加载指示器。回调中的有状态变量将在加载完成时更改加载状态。

推荐阅读