如何将启动画面添加到 Flutter webview 应用程序？

Question

**大家好，我如何向这个 webview Flutter 应用程序添加启动画面。 因为我想把它上传到 App Store。

我将此代码上传到谷歌商店并已被接受。 我是 Flutter 的新手，没有经验，所以请重写你告诉我的代码，以确保回答的代码正常工作。

提前谢谢你。

---

import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
          title: 'My Website',
          url: 'https://www.???.com/'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title, this.url});

  final String title;
  final String url;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;

  final Completer<WebViewController> _controllerCompleter =
      Completer<WebViewController>();
  //Make sure this function return Future<bool> otherwise you will get an error
  Future<bool> _onWillPop(BuildContext context) async {
    if (await _controller.canGoBack()) {
      _controller.goBack();
      return Future.value(false);
    } else {
      return Future.value(true);
    }
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(context),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SafeArea(
            child: WebView(
          key: UniqueKey(),
          onWebViewCreated: (WebViewController webViewController) {
            _controllerCompleter.future.then((value) => _controller = value);
            _controllerCompleter.complete(webViewController);
          },
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: widget.url,
        )),
      ),
    );
  }
}

Answer 1

您可以创建一个显示初始屏幕的小部件并按住该小部件几秒钟，然后将其推送到您的新小部件，如下所示：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'My Website',
        url: 'https://www.google.com/',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title, this.url});

  final String title;
  final String url;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool loading = true;
  WebViewController _controller;
  final Completer<WebViewController> _controllerCompleter =
      Completer<WebViewController>();
  //Make sure this function return Future<bool> otherwise you will get an error
  Future<bool> _onWillPop(BuildContext context) async {
    if (await _controller.canGoBack()) {
      _controller.goBack();
      return Future.value(false);
    } else {
      return Future.value(true);
    }
  }

  startSplashScreen() async {
    var duration = const Duration(seconds: 3);
    return Timer(
      duration,
      () {
        setState(() {
          loading = false;
        });
      },
    );
  }

  @override
  void initState() {
    super.initState();
    startSplashScreen();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(context),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: loading == true
            ? Center(
                child: Text(
                 'APP LOGO',
                  style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            : SafeArea(
                child: WebView(
                  key: UniqueKey(),
                  initialUrl: widget.url,
                  onWebViewCreated: (WebViewController webViewController) {
                    _controllerCompleter.complete(webViewController);
                  },
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              ),
      ),
    );
  }
}

结果：

Answer 2

使用这个package

在导航到您的主屏幕之前添加此代码

new SplashScreen(
  seconds: 14,
  navigateAfterSeconds: HomeScreen(),
  title: Text('Welcome In SplashScreen'),
  image: Image.asset('splash.png'),
  backgroundColor: Colors.white,
  photoSize: 100.0,
  loaderColor: Colors.red
);

例如编辑：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(
      seconds: 5,
      navigateAfterSeconds: MyHomePage(
          title: 'My Website',
          url: 'https://www.???.com/'),
      title: Text('Welcome In SplashScreen'),
      backgroundColor: Colors.white,
      loaderColor: Colors.red
    ),
  );
  }
}