Flutter启动页

效果图

dart 复制代码
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'jumpPage.dart';

class TransitPage extends StatefulWidget {
  const TransitPage({super.key});

  @override
  State<TransitPage> createState() => _TransitPage();
}

class _TransitPage extends State<TransitPage> {
  late Timer _timer;
  int _currentTime = 6;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        _currentTime--;
      });
      if(_currentTime<=0){
        _jumpRoutePage();

      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
              "images/page.png",
            fit: BoxFit.cover,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
          ),
          Positioned(
            top: MediaQuery.of(context).padding.top+30,
            right: MediaQuery.of(context).padding.right+30,
            child: InkWell(
              child: _clipButton(),
              onTap: (){
                _jumpRoutePage();
              },
            ),
          )
        ],
      ),

    );
  }
  Widget _clipButton() {

    return ClipRRect(
      borderRadius: BorderRadius.circular(40),
      child: Container(
        height: 50,
        width: 50,
        color: Colors.black.withOpacity(0.5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("跳过",style: TextStyle(color: Colors.white,fontSize: 12),),
            Text("${_currentTime}s",style: TextStyle(color: Colors.white,fontSize: 12),),
          ],
        ),

      ),
    );
  }
  //倒计结束或点击跳过后的页面
  void _jumpRoutePage() {
    _timer.cancel();
    Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context)=>TransitPage2()), (route) => false);
  }
}
相关推荐
liulian091618 分钟前
Flutter 依赖注入与设备信息库:get_it 与 device_info_plus 的 OpenHarmony 适配指南总结
flutter·华为·学习方法·harmonyos
里欧跑得慢43 分钟前
微交互设计模式:提升用户体验的细节之美
前端·css·flutter·web
stringwu1 小时前
Flutter GetX 核心坑及架构选型与可替换性方案
前端·flutter
IntMainJhy1 小时前
【flutter for open harmony】第三方库Flutter 国际化多语言的鸿蒙化适配与实战指南
数据库·flutter·华为·sqlite·harmonyos
liulian09161 小时前
【Flutter for OpenHarmony 】地图功能适配与位置显示实现指南
flutter·华为·学习方法·harmonyos
IntMainJhy2 小时前
【flutter for open harmony】Flutter SQLite 本地数据库的鸿蒙化适配与实战指南
数据库·flutter·sqlite
IntMainJhy2 小时前
【flutter for open harmony】第三方库「Flutter 聊天组件鸿蒙化适配与实战:从零搭建鸿蒙跨平台聊天页面」
flutter·华为·harmonyos
jiejiejiejie_2 小时前
Flutter for OpenHarmony 地图功能萌系实战指南:给 App 加上超萌 “小地图”✨
flutter·华为·harmonyos
jiejiejiejie_2 小时前
Flutter for OpenHarmony 页面导航与动效库适配小记复盘:让 App 又丝滑又灵动✨
flutter·华为·harmonyos
liulian09163 小时前
Flutter 网络状态与内容分享库:connectivity_plus 与 share_plus 的 OpenHarmony 适配指南总结
flutter·华为·学习方法·harmonyos