[英]How can i set the duration in flutter splash screen dynamically?
flutter 啟動畫面顯示在主頁前的屏幕上。 但是主頁有一些從互聯網上獲取的數據。 初始屏幕的持續時間設置為固定秒。 我很想知道 flutter 中有沒有一種方法可以在屏幕上看到啟動畫面,直到所有數據都加載到下一個屏幕上?
我的啟動畫面 class
import 'dart:async';
import 'package:flutter/material.dart';
import 'listview.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(
Duration(seconds: 5),
() => Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => restlistview())));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: DecoratedBox(
position: DecorationPosition.background,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: NetworkImage(
'https://i.imgur.com/KS9AbXK.png',
),
fit: BoxFit.cover)),
child: Image.network('https://i.imgur.com/o4ZRh9k.png'),
),
);
}
}
閃屏后出現的class
import 'package:flutter/material.dart';
class restlistview extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = "ListView List";
List choices = const [
const Choice(
title: 'Artisan Coffee',
Address: 'Kumarpara,Sylhet',
imglink: 'https://i.imgur.com/9TUi7ts.png'),
const Choice(
title: 'Cafe Aarko',
Address: 'Barutkhana,Sylhet',
imglink: 'https://i.imgur.com/JEfDpIZ.png?1'),
const Choice(
title: 'Cafe La vista',
Address: 'Zindabazar,Sylhet',
imglink: 'https://i.imgur.com/u4Lvc4k.png'),
const Choice(
title: 'Coffee Club',
Address: 'Kumarpara,Sylhet',
imglink: 'https://i.imgur.com/gVoh8xO.png'),
const Choice(
title: 'Peepers',
Address: 'Zindabazar,Sylhet',
imglink: 'https://i.imgur.com/izRo3Tj.png'),
const Choice(
title: 'The Swad Restaurant',
Address: 'Zindabazar,Sylhet',
imglink: 'https://i.imgur.com/o4ZRh9k.png'),
];
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Image.network(
'https://i.imgur.com/Z9ETdwa.png',
fit: BoxFit.cover,
),
backgroundColor: Color(0xffB01C2A),
),
body: DecoratedBox(
position: DecorationPosition.background,
decoration: BoxDecoration(
color: Color(0xffFAAF40),
image: DecorationImage(image: NetworkImage(''))),
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.only(top: 10.0),
children: List.generate(choices.length, (index) {
return Center(
child: ChoiceCard(
choice: choices[index], item: choices[index]),
);
})))));
}
}
class Choice {
final String title;
final String Address;
final String imglink;
const Choice({this.title, this.Address, this.imglink});
}
class ChoiceCard extends StatelessWidget {
const ChoiceCard(
{Key key,
this.choice,
this.onTap,
@required this.item,
this.selected: false})
: super(key: key);
final Choice choice;
final VoidCallback onTap;
final Choice item;
final bool selected;
@override
Widget build(BuildContext context) {
TextStyle textStyle = Theme.of(context).textTheme.display1;
if (selected)
textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
return Card(
elevation: 0.0,
color: Color(0xffB01C2A).withOpacity(0.2),
child: Row(
children: [
new Container(
color: Colors.transparent,
height: 100,
width: 100,
padding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 0.0, right: 8.0),
child: Image.network(choice.imglink)),
new Container(
padding: const EdgeInsets.only(
top: 30.0, bottom: 8.0, left: 2.0, right: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(choice.title,
style: TextStyle(
fontSize: 20,
color: Color(0xffB01C2A),
fontWeight: FontWeight.bold)),
Text(choice.Address,
style: TextStyle(
color: Colors.black.withOpacity(1.0),
fontWeight: FontWeight.bold)),
],
),
)
],
crossAxisAlignment: CrossAxisAlignment.start,
));
}
}
主class
import 'package:flutter/material.dart';
import 'package:sylhetrestaurant/splashscreen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext contextP) {
return MaterialApp(debugShowCheckedModeBanner: false, home: SplashScreen());
}
}
是的你可以。 邏輯是在您導航到另一個屏幕之前等待fetchData
function 完成
一種方法
initState(){
super.initState();
leaveSplashScreen();
}
Future fetchData()async{
//Fetch your data here.
}
void leaveSplashScreen() async{
await fetchData();
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => restlistview())));
}
另一種方法。
initState(){
super.initState();
fetchData().then((value){
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => restlistview())));
});
}
Future fetchData()async{
//Fetch your data here.
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.