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);
  }
}
相关推荐
追梦的鱼儿15 小时前
Flutter 生命周期详解:Stateless 与 Stateful 完全对比
flutter
tangweiguo0305198715 小时前
Flutter 页面生命周期超全总结(附 addPostFrameCallback 详解)
flutter
国医中兴16 小时前
Flutter 三方库 dson 的鸿蒙化适配指南 - 极简的序列化魔法、在鸿蒙端实现反射式 JSON 映射实战
flutter·harmonyos·鸿蒙·openharmony
Lesile17 小时前
Flutter回顾#1:动画:
flutter
yuanlaile17 小时前
2026年全新版Flutter教程_Dart Flutter入门实战系列视频教程
flutter·flutter教程·dart教程·flutter必备基础
国医中兴18 小时前
Flutter 三方库 cloudflare_r2_uploader 的鸿蒙化适配指南 - 云端存储的疾速通道、在鸿蒙端实现 R2 分段上传实战
flutter·harmonyos·鸿蒙·openharmony·cloudflare_r2_uploader
恋猫de小郭19 小时前
Flutter Beta 版本引入 ScrollCacheExtent ,并修复长久存在的 shrinkWrap NaN 问题
android·前端·flutter
国医中兴19 小时前
Flutter 三方库 weaver 的鸿蒙化适配指南 - 玩转轻量级服务发现、在鸿蒙端实现模块化治理与解构实战
flutter·harmonyos·鸿蒙·openharmony
国医中兴19 小时前
Flutter 三方库 tapper 的鸿蒙化适配指南 - 单元测试的“闪电侠”、在鸿蒙端实现极简函数式测试实战
flutter·harmonyos·鸿蒙·openharmony
国医中兴1 天前
Flutter 三方库 stack_blur 鸿蒙适配指南 - 实现工业级高性能模糊滤镜、在 OpenHarmony 上打造极致视觉质感实战
flutter·华为·harmonyos