web-dev-qa-db-ja.com

フラッターがスプラッシュスクリーンを3秒間押し続けます。 Flutterでスプラッシュスクリーンを実装する方法は？

3秒間フラッターでスプラッシュ画面を表示し、次にログイン画面に進む方法。

カウントダウンタイマーを試しましたが、インポートは未解決です

import 'package: countDown/countDown.Dart';
CountDown cd  =  new CountDown(new Duration(seconds: 4));
CountDown is unresolved

Android StudioとFlutter

androidiosandroid-studiofluttersplash-screen
6
Deepak Kanyan

すべてのアプリで使用するシンプルなソリューション。

ビルドメソッドのコードスニペットでTimerクラスを使用する

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

class Splash extends State<SplashScreen>  {

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

  }
  @override
  Widget build(BuildContext context) {
        Timer(
            Duration(seconds: 3),
                () =>
            Navigator.of(context).pushReplacement(MaterialPageRoute(
                builder: (BuildContext context) => LandingScreen())));


    var assetsImage = new AssetImage(
        'images/new_logo.png'); //<- Creates an object that fetches an image.
    var image = new Image(
        image: assetsImage,
        height:300); //<- Creates a widget that displays an image.

    return MaterialApp(
      home: Scaffold(
        /* appBar: AppBar(
          title: Text("MyApp"),
          backgroundColor:
              Colors.blue, //<- background color to combine with the picture :-)
        ),*/
        body: Container(
          decoration: new BoxDecoration(color: Colors.white),
          child: new Center(
            child: image,
          ),
        ), //<- place where the image appears
      ),
    );
  }
}
4
Quick learner

下記参照main.Dart

import 'Dart:async';    
import 'package:flutter/material.Dart';    
import 'src/login_screen.Dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    new Future.delayed(
        const Duration(seconds: 3),
        () => Navigator.Push(
              context,
              MaterialPageRoute(builder: (context) => LoginScreen()),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: new Column(children: <Widget>[
          Divider(
            height: 240.0,
            color: Colors.white,
          ),
          new Image.asset(
            'assets/logo.png',
            fit: BoxFit.cover,
            repeat: ImageRepeat.noRepeat,
            width: 170.0,
          ),
          Divider(
            height: 105.2,
            color: Colors.white,
          ),
        ]),
      ),
    );
  }
}

これがあなたに役立つことを願っています

5
Rahul Mahadik

Future.delayedを使用すると、遅延してコードを実行できます

new Future.delayed(const Duration(seconds: 3), () {
  Navigator.pushNamed(context, '/login');
});

更新

const delay = 3;
widget.countdown = delay;

StreamSubscription sub;
sub = new Stream.periodic(const Duration(seconds: 1), (count) {
  setState(() => widget.countdown--);  
  if(widget.countdown <= 0) {
    sub.cancel();
    Navigator.pushNamed(context, '/login');
  }
});
1
Günter Zöchbauer

Future.delayedは良い解決策ですなしカウントダウン。

ただし、カウントダウンがある場合は、Flutterが提供するアニメーションフレームワークを使用できます。

その背後にあるアイデアは、3秒間のAnimationControllerを使用することです。 splashScreenがインスタンス化されるとすぐにアニメーションを開始します。アニメーションの終了時に/loginにリダイレクトするリスナーを追加します。

次に、そのコントローラーをAnimationBuilderに渡し、animationController.lastElaspedDurationに基づいてカウントダウンのフォーマットを処理します。

class SplashScreen extends StatefulWidget {
  final Duration duration;

  const SplashScreen({this.duration});

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

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    animationController = new AnimationController(duration: widget.duration, vsync: this)
      ..forward()
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          Navigator.pushReplacementNamed(context, '/login');
        }
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
      animation: animationController,
      builder: (context, _) {
        return new Center(
          child: new Text(animationController.lastElapsedDuration.inSeconds.toString()),
        );
      },
    );
  }
}
1
Rémi Rousselet

この回答は、flutter-reduxを使用している場合にのみ適用されます。

flutter-reduxとともに、ロード画面を表示するにはredux-persistライブラリを使用する必要があります。

redux-persistは、アプリの状態を保存、再水和するために使用されます。

例：

1.main.Dart

import 'package:flutter/material.Dart';
import 'package:flutter/foundation.Dart';
import 'package:flutter_redux/flutter_redux.Dart';
import 'package:redux_persist_flutter/redux_persist_flutter.Dart';

import 'package:flutter_redux_starter/presentation/platform_adaptive.Dart';
import 'package:flutter_redux_starter/screens/loading_screen.Dart';
import 'package:flutter_redux_starter/store/store.Dart';
import 'package:flutter_redux_starter/middleware/middleware.Dart';
import 'package:flutter_redux_starter/models/app_state.Dart';
import 'package:flutter_redux_starter/routes.Dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    final store = createStore();

    MyApp();

    @override
    Widget build(BuildContext context) {
        return new PersistorGate(
            persistor: persistor,
            loading: new LoadingScreen(),
            builder: (context) => new StoreProvider<AppState>(
                store: store,
                child: new MaterialApp(
                    title: 'Flutter test App',
                    theme: defaultTargetPlatform == TargetPlatform.iOS
                        ? kIOSTheme
                        : kDefaultTheme,
                routes: getRoutes(context, store),
                    initialRoute: '/login',
                )
            ),
        );
    }

}

2.store.Dart

import 'package:redux/redux.Dart';

import 'package:flutter_redux_starter/reducers/app_reducer.Dart';
import 'package:flutter_redux_starter/models/app_state.Dart';
import 'package:flutter_redux_starter/middleware/middleware.Dart';

Store<AppState> createStore() { 
    Store<AppState> store = new Store(
        appReducer,
        initialState: new AppState(),
        middleware: createMiddleware(),
    );
    persistor.start(store);

    return store;
}

CreateStoreでは、Future.delayedを使用して、ストアの作成を特定の秒数だけ遅らせることができます。

new Future.delayed(const Duration(seconds: 3), () {
 // 
});
0
WitVault

initStateでFuture.delayedコンストラクタを使用できます。これにより、ナビゲーションが発生する前に、指定した期間SplashScreenが維持されます。

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState (){
    super.initState();
    // TODO initial state stuff
    new Future.delayed(const Duration(seconds: 4));
  }
  @override
  Widget build(BuildContext context) {
    //build
  }
}

私は回答をコピーしただけです： これ

0
R Rifa Fauzi Komara

スタック（スプラッシュスクリーン）から古いアクティビティをクリアする必要があると思うので、pushNamedAndRemoveUntilのみを使用する代わりに、 pushNamed を使用する必要があります。

  new Future.delayed(const Duration(seconds: 3), () {
  Navigator.pushNamedAndRemoveUntil(context, '/login', ModalRoute.withName('/'));
});
0
user6490462