Flutter 第一个启动页面答案

【问题标题】：Flutter first launch pageFlutter 第一个启动页面
【发布时间】：2018-10-27 15:37:48
【问题描述】：

我目前正在开发一个 Flutter 版本的 Android 应用程序，现在想要实现第一个启动页面。它应该只在应用程序安装到设备上后首次启动时显示。我想出了如何为 android 应用程序做这件事，但我只有 Flutter 的基本知识，所以我问了这个问题。有谁知道如何在 Flutter 中以简单的方式做到这一点？

提前感谢您的帮助！

【问题讨论】：

显然我的问题不够清楚。我不是指启动画面，我指的是仅在安装后第一次启动我的应用程序时显示的页面。
这有什么问题？您需要存储已显示页面的位置，如果该设置可用，请不要显示它。
不，我不想要启动画面。我希望该应用仅在首次启动该应用以进行登录时启动一项活动。
那么您是如何在 Android 中做到这一点的呢？这对 Flutter 怎么不起作用？你试过什么？
愿此链接对您有所帮助 - stackoverflow.com/a/53032136/10545783

标签： dart flutter

【解决方案1】：

我真的不知道确切的逻辑，但这就是我将如何实现它，我将只是向您解释以下代码在语法上不正确的逻辑

让我们将您的一次性查看页面称为介绍页面 我将在该介绍页面中维护一个整数变量

int counter;

介绍页面第一次加载的时间我将初始化

 counter = sharedPreferencevalue // defaults to 0 when App is fresh installed

并检查 if counter==0

 if yes
   load the intro page 
   counter++;
   store counter in SharedPreference; //overwrite the default value
 else
   go to Home

只需增加变量并使用 SharedPreference 在本地存储该变量的值

对于那些不了解 Shared Preferences 的人，它允许 Flutter 应用程序（Android 或 iOS）以键值对的形式保存设置、属性和数据，即使用户关闭应用程序，这些数据也会保留。

希望这会有所帮助:)

【讨论】：

布尔变量也有帮助。选择 int 的任何具体原因？
yes boolean 也会有所帮助，但是如果您希望仅在前两次打开第一页的情况下 boolean 不起作用，希望您能明白。

【解决方案2】：

首次查看用户输入的页面，是示例代码，您可以了解一下

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:reborn_next_job02/ui/LoginScreen.dart';
import 'package:reborn_next_job02/ui/splashScreen.dart';
import 'package:shared_preferences/shared_preferences.dart';

class Splash extends StatefulWidget {
  @override
  SplashState createState() => new SplashState();
}

class SplashState extends State<Splash> {
  Future checkFirstSeen() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool _seen = (prefs.getBool('seen') ?? false);
    if (_seen) {
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new LoginScreen()));
    } else {
      prefs.setBool('seen', true);
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new urlScreen()));
    }
  }

  @override
  void initState() {
    super.initState();
    new Timer(new Duration(seconds: 10), () {
      checkFirstSeen();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Text('Loading...'),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hello'),
      ),
      body: new Center(
        child: new Text('This is the second page'),
      ),
    );
  }
}

class IntroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Text('This is the intro page'),
            new MaterialButton(
              child: new Text('Gogo Home Page'),
              onPressed: () {
                Navigator.of(context).pushReplacement(
                    new MaterialPageRoute(builder: (context) => new Home()));
              },
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

可能是复制/粘贴加上更改为教科书示例是您在此处展示的示例无效的原因吗？例如，缺少以下内容：SplashState-build 需要 MaterialApp（而不仅仅是 Scaffold），否则您会收到 MediaQuery-error... 而且，您在 checkFirstSeen() 中调用 urlscreen() 而不是 Home方法等。如果您将示例更改为工作示例，那就太好了。但除此之外，我觉得这是一个简单的例子......
另外，您的prefs.setBool('seen', true); 应该是false（否则介绍屏幕不断出现）...

【解决方案3】：

请查找repo。

如果您想了解 Flutter，您可以在我们公司的 Github 页面上找到一些很好的示例。另外，您可以查看我们公司的页面FlutterDevs。

【讨论】：

喜欢动画的伟大作品，但这肯定不能回答问题

【解决方案4】：

不能帮助您删除后退按钮，但我认为它会帮助您制作启动画面我开发了一个 package Link

【讨论】：

【解决方案5】：

您可以在 Dart 中制作 启动画面，但不推荐，因为它会让您的用户感到厌烦（您将使用固定的持续时间），所以我个人认为我会选择原生启动画面每个平台的屏幕。

安卓

修改文件launch_background.xml
取消注释位图项目并将您拥有的任何项目放入 mipmap 或可绘制文件夹中
在 android:drawable item 中更改背景颜色

iOS

将您的自定义图像添加到 Assets.xcassets 文件夹中
修改文件LaunScreen.storyboard，更改背景颜色，添加和imageview等。

我创建了一个帖子，其中包含有关 Flutter 启动画面的所有详细信息，您可以看看：https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548

【讨论】：

如果固定持续时间是唯一的问题，为什么不使用 FutureBuilder？如果未来没有错误和数据，那么我们渲染 SplashScreen 小部件。如果它有错误，我们可以渲染错误页面或退出应用程序。当数据准备好后，我们就可以渲染主页了。

【解决方案6】：

您可以通过为您的介绍/应用设置单独的路线来做到这一点：

void main() {
  runApp(new MaterialApp(
    home: new MyIntroPage(),
    routes: <String, WidgetBuilder> {
      '/app': (BuildContext context) => new MyAppPage()
    },
  ));
}

在您的介绍页面中，您可以检查用户是否已经看到它的标志（有关持久数据的一些想法，请参阅 here），如果是，则直接导航到应用程序（例如 like the _completeLogin function here）

【讨论】：