flutter实现闪屏

效果:

1.创建main.dart(运行主界面)、SplashPage(闪屏界面)、HomePage(系统主界面)
2.在mian.dart中加入:

import 'package:flutter/material.dart';
import 'SplashPage.dart';
import 'dart:io';
import 'package:flutter/services.dart';

void main() {
  runApp(new MyApp());
  if (Platform.isAndroid) {
//    沉浸状态栏
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SplashPage(), // 闪屏页
    );
  }
}

3.在SplashPage加入:

import 'dart:async';
import 'package:bbl/HomePage.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';

class SplashPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _SplashPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class _SplashPage extends StatefulWidget {
  @override
  State createState() {
    return _SplashPageState();
  }
}

class _SplashPageState extends State<_SplashPage> {
  Timer timer;
  var count = 3;

  @override
  Widget build(BuildContext context) {
    return new Stack(children: [
      new Image.asset(
        "images/ping.jpg",
        width: double.infinity,
        height: double.infinity,
        fit: BoxFit.cover,
      ),
      new Positioned(
        top: 20.0,
        right: 10.0,
        child: new FlatButton(
          child: new Text(
            '跳过 ${count}',
            style: new TextStyle(color: Colors.white),
          ),
          color: Color.fromARGB(55, 0, 0, 0),
          onPressed: () {
            goHomePage();
          },
        ),
      ),
    ]);
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    countDown();
  }

  //倒计时
  void countDown() {
    timer = new Timer(new Duration(seconds: 1), () {
      // 只在倒计时结束时回调
      if (count != 1) {
        setState(() {
          count = count - 1;
          countDown();
        });
      } else {
        timer.cancel();
        goHomePage();
      }
    });
  }

//  跳转主页
  void goHomePage() {
    Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => new HomePage()),
        (route) => route == null);
  }
}

4.在HomePage加入:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        debugShowCheckedModeBanner: false, home: new MainPageWidget());
  }
}

class MainPageWidget extends StatefulWidget {
  @override
  State createState() {
    return new MainPageState();
  }
}

class MainPageState extends State {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color.fromARGB(255, 153, 204, 0),
      ),
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
         body: Center(child: Text("主页"),),
        ),
      );
  }

}

5.完成

你可能感兴趣的:(flutter)