簡體   English   中英

如何動態設置 flutter 啟動畫面中的持續時間?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM