Écran de démarrage flottant pendant 3 secondes. Comment implémenter un écran de démarrage dans Flutter?
Comment afficher l'écran de démarrage en flottement pendant 3 secondes, puis passer à l'écran de connexion suivant.
J'ai essayé.countdowntimer mais l'importation n'est pas résolue
import 'package: countDown/countDown.Dart';
CountDown cd = new CountDown(new Duration(seconds: 4));
CountDown is unresolved
Android Studio & Flutter
Solution simple que j'utilise dans chaque application.
Utiliser la classe Timer dans l'extrait de code de la méthode de génération
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
),
);
}
}
se référer ci-dessous 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,
),
]),
),
);
}
}
J'espère que cela vous aidera
Vous pouvez exécuter du code avec un retard en utilisant Future.delayed
new Future.delayed(const Duration(seconds: 3), () {
Navigator.pushNamed(context, '/login');
});
mise à jour
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');
}
});
Future.delayed serait une bonne solution sans un compte à rebours.
Mais étant donné que vous avez un compte à rebours, vous pouvez utiliser le cadre d'animation fourni par Flutter.
L'idée derrière cela serait d'utiliser un AnimationController d'une durée de 3 secondes. Démarrez l'animation dès que le splashScreen est instancié. Et ajoutez un écouteur pour rediriger vers /login à la fin de l'animation.
Passez ensuite ce contrôleur à un AnimationBuilder qui gérerait le formatage de votre compte à rebours basé sur 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()),
);
},
);
}
}
Cette réponse n'est applicable que si vous utilisez flutter-redux.
De même que flutter-redux vous devez utiliser redux-persist bibliothèque pour afficher l'écran de chargement.
redux-persist est utilisé pour stocker, réhydrater l'état de l'application.
Exemple:
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;
}
Dans createStore, vous pouvez utiliser Future.delayed pour retarder la création du magasin pendant un certain nombre de secondes.
new Future.delayed(const Duration(seconds: 3), () {
//
});
Vous pouvez utiliser Future.delayed constructeur dans votre initState. Cela gardera votre SplashScreen pendant la durée que vous spécifiez avant que la navigation n'ait lieu.
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
}
}
J'ai seulement copié les réponses de: this
Je pense que vous devez effacer l'ancienne activité de la pile (écran de démarrage), vous devez donc utiliser pushNamedAndRemoveUntil au lieu d'utiliser pushNamed uniquement.
new Future.delayed(const Duration(seconds: 3), () {
Navigator.pushNamedAndRemoveUntil(context, '/login', ModalRoute.withName('/'));
});