Question

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

提前感谢您的帮助！

Answer 1

您可以在Dart中创建启动画面，但不建议这样做，因为它会给您的用户带来麻烦（您将使用固定的持续时间），因此，我个人认为我会选择原生启动每个平台上的屏幕。

Android

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

iOS

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

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

Answer 2

您可以通过为您的简介/应用程序设置单独的路线来实现此目的：

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

在您的介绍页面中，您可以检查用户是否看到它的标记（有关持久数据的一些想法，请参阅here），如果是，请直接导航到应用程序（例如{{3} }）

Answer 3

带有用户输入的首次查看页面，它是示例代码，您可以了解其想法

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()));
              },
            )
          ],
        ),
      ),
    );
  }
}

Answer 4

无法帮助您删除后退按钮，但我认为这会帮助您制作启动画面，我开发了程序包 Link

Answer 5

请找到repo。

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

第一个推出页面

5 个答案: