Flutter hold splash screen for 3 Seconds. How to implement splash screen in Flutter?

Question

How to show splash screen in flutter for 3 seconds and then go next my login screen.

I have tried.countdowntimer but import is unresolved

import \'pack         


        

Answer 1

This answer is applicable only in case you are using flutter-redux.

Along with flutter-redux you need to use redux-persist library to show loading screen.

redux-persist is used to store, rehydrate app state.

Example:

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;
}

In createStore you can use Future.delayed to delay the creation of store for certain no of seconds.

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

Answer 2

You can execute code with a delay using Future.delayed

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

update

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');
  }
});     

Answer 3

I think you need to clear the old activity from stack (Splash Screen), So you have to use pushNamedAndRemoveUntil instead of using pushNamed only.

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