Ajouter un écran de projection pour Flutter les applications

il n'y a pas encore un bon exemple de cela, mais vous pouvez le faire vous-même en utilisant les outils natifs pour chaque plate-forme:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way /

abonnez-vous à numéro 8147 pour les mises à jour sur le code exemple pour splash écran. Si le clignotant noir entre l'écran de projection et l'application sur iOS vous dérange, abonnez à numéro 8127 pour les mises à jour.

Edit: depuis le 31 août 2017, un support amélioré pour les écrans anti-éclaboussures est maintenant disponible dans le nouveau modèle de projet. Voir #11505 .

, Vous devriez essayer de code ci-dessous, travaillé pour moi

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

si vous flutter create d votre projet, vous pouvez suivre les étapes à https://flutter.io/assets-and-images/#updating-the-launch-screen .

les deux @Collin Jackson et @Sniper ont raison. Vous pouvez suivre ces étapes pour configurer les images de lancement dans android et iOS respectivement. Puis dans votre MyApp(), dans votre initState(), vous pouvez utiliser Avenir.retard pour configurer une minuterie ou appeler une api. Jusqu'à ce que la réponse est renvoyée de l'Avenir, vos icônes de lancement sera montré que la réponse venir, vous pouvez passer à l'écran que vous voulez aller à après l'écran de démarrage. Vous pouvez voir ce lien : Scintillement de l'Écran de démarrage

pour Android, Allez à android > app > src > main > res > drawable > launcher_background.xml

décommentez maintenant ceci et remplacez @mipmap/launch_image , par votre emplacement d'image.

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

vous pouvez changer la couleur de votre écran ici -

<item android:drawable="@android:color/white" />

ajouter une page comme ci-dessous et le routage pourrait aider

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

si vous voulez poursuivre, voir: https://www.youtube.com/watch?v=FNBuo-7zg2Q

les personnes qui obtiennent l'erreur comme l'image non trouvée après avoir appliqué la réponse vérifiée s'assurent que vous ajoutez @mipmap/ic_launcher au lieu de @mipmap/ ic_launcher.png

le code de Jaldhi Bhatt ne marche pas pour moi.

Flutter lance un ' navigation demandée avec un contexte qui ne comprend pas un navigateur .

j'ai fixé le code enveloppant le composant consommateur Navigator à l'intérieur d'un autre composant qui initialise le contexte Navigator en utilisant des routes, comme mentionné dans cet" article .

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

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

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}