首页 > 解决方案 > 如何动态设置颤动闪屏中的持续时间?

问题描述

Flutter 闪屏显示在首页前的屏幕上。但是主页有一些从互联网上获取的数据。初始屏幕的持续时间设置为固定秒。我很想知道是否有一种方法可以使闪屏在屏幕上可见,直到所有数据都加载到下一个屏幕上?

我的闪屏课

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

启动画面之后的类

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

主班

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

标签: androidflutterdartsplash-screen

解决方案


是的你可以。fetchData逻辑是在导航到另一个屏幕之前等待函数完成

一种方法

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

推荐阅读