flutter-实现一个APP引导页

最新推荐文章于 2024-08-31 07:08:41 发布

石博

最新推荐文章于 2024-08-31 07:08:41 发布

阅读量3.9k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/shb2058/article/details/101532963

版权

本文将介绍如何在Flutter中创建一个APP引导页，涉及知识点包括StatefulWidget的应用、PageView的滑动效果、Stack布局实现定位、View边框设置、点击事件处理、资产图片加载与尺寸调整、沉浸式状态栏、屏幕尺寸与状态栏高度获取、应用生命周期管理和AppBar的自定义功能，如右按钮弹出菜单等。

摘要由CSDN通过智能技术生成

包含的知识点:

1.StateFulWidget的使用

2.PageView的使用

3.Stack布局（类似FramenLayout:实现决定定位）

4.View设置边框

5.给View设置点击事件

6.asset下图片的加载，以及大小设置为剩余的所有

7.沉浸式状态栏

8.获取屏幕尺寸以及状态栏高度

9.前后台切换时生命周期

10.Appbar的一些属性（右侧按钮点击弹出菜单等）

import 'package:flutter/material.dart';
import 'dart:ui'; //获取屏幕尺寸需要导入的包
import 'dart:io';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
  if (Platform.isAndroid) {
// 沉浸式状态栏1:设置状态栏颜色。
  //需要导入下面的包
//    import 'dart:io';
//    import 'package:flutter/services.dart';
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  // 沉浸式状态栏2:使用AnnotatedRegion包裹是为了处理当状态栏是白色的时候，本来的白色文字看不到了
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.dark,
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new HomePage(),
        ));
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new HomePage_State();
  }
}

class HomePage_State exte