flutter实用系列(六)之启动第一屏,第一屏显示跳过按钮

栏目: Android · 发布时间: 5年前

内容简介:先上效果图flutter如果不设置启动的第一屏

先上效果图

flutter实用系列(六)之启动第一屏,第一屏显示跳过按钮

flutter如果不设置启动的第一屏

flutter实用系列(六)之启动第一屏,第一屏显示跳过按钮

根据flutter本来的设定为显示白色,也就是打开App的一瞬间到执行main函数的阶段会有一个白屏显示,这样难免会有点难看,很多app打开会有一个停留3秒或者几秒的图片,并有一个按钮让你点击跳过,那么往下看,这些是怎么实现的

设置第一屏

flutter实用系列(六)之启动第一屏,第一屏显示跳过按钮

把图上的那一段代码注释去掉(flutter项目创建完,这段是注释着的)

mipmap这个文件夹如果本来没有,就创建这个文件夹,然后把要启动的第一屏图片放进去,这样启动app的时候就会显示这一张图片了

android:gravity="fill"表示图片填充满屏幕大小

停留5秒和跳过按钮

直接上代码,注释在代码里面

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';


void main(){
    // debugPaintSizeEnabled = true;
    runApp(MaterialApp(
        debugShowCheckedModeBanner: false,
        title: '签到',
        theme: ThemeData(
            primaryColor: Colors.yellow
        ),
        home: StartApp()
    ));
}

class StartApp extends StatefulWidget{
    _StartAppState createState() => _StartAppState();
}

class _StartAppState extends State<StartApp>with SingleTickerProviderStateMixin{

    var loginState;

    AnimationController _animationController;
    Animation _animation;

    void initState(){
        super.initState();
        //创建动画控制器
        _animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 5000));
        _animation = Tween(begin: 1.0,end: 1.0).animate(_animationController);
        _animation.addStatusListener((status){
            if(status == AnimationStatus.completed){
                //
                //这边的添加动画的监听,当动画5秒后的状态是completed完成状态,则执行这边的代码,跳转到登录页,或者其他页面
                //
            }
        });
        _animationController.forward();
    }

    @override
    void dispose(){
        _animationController.dispose();
        super.dispose();
    }
    
    @override
    Widget build(BuildContext context){
        return FadeTransition(
            opacity: _animation,
            child: ConstrainedBox(
                //让他的child充满整个屏幕
                constraints: BoxConstraints.expand(),
                child: Stack(
                    //
                    children: <Widget>[
                        Container(
                            height:double.infinity,
                            //这边放一张图用于显示5秒的底图,这张图和上面的图一样,这样就有连贯起来的效果了
                            child:Image.asset(
                                'image/first.jpg',
                                scale:1.0,
                                fit:BoxFit.fill
                            ),
                        ),
                        Positioned(
                            top: 50.0,
                            right: 20.0,
                            child: FlatButton(
                                color: Colors.green,
                                highlightColor: Colors.blue,
                                colorBrightness: Brightness.dark,
                                splashColor: Colors.grey,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)
                                ),
                                child: Text("跳过"),
                                onPressed: (){
                                    _animationController.dispose();
                                    //
                                    //当点击跳过按钮的时候,则执行这边的代码,跳转到登
                                    //录页,或者其他页面
                                },
                            ),
                        )
                    ],
                )
            )
        );
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

暗网

暗网

杰米·巴特利特 / 刘丹丹 / 北京时代华文书局 / 2018-7 / 59.00

全面深入揭秘“黑暗版淘宝”暗网的幕后世界和操纵者 现实中所有的罪恶,在暗网中,都是明码标价的商品。 暗杀、色情、恋童癖、比特币犯罪、毒品交易…… TED演讲、谷歌特邀专家、英国智库网络专家杰米•巴特利特代表作! 1、 被大家戏称为“黑暗版淘宝”的暗网究竟是什么?微信猎奇 文不能告诉你的真相都在这里了! 2、 因章莹颖一案、Facebook信息泄露危机而被国人所知的暗网......一起来看看 《暗网》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具