WordPress+Flutter开发APP教程:12.初始化依赖包 flutter_screenutil

前言

本小节需要实现的功能为:在app中初始化flutter_screenutil

阅读本小节之前,请务必阅读之前的小节并按照步骤进行操作。

开始

flutter_screenutil

由于flutter的编译、渲染机制不同,在flutter中你设置的字体大小和宽高并非固定,可能在开发的屏幕上看起来很正常,但是到了其他机型上就会显得太大或者太小,flutter_screenutil的出现就是为了解决这个问题的。

flutter_screenutil 有完整的中文文档,具体解决逻辑与思路网上和文档上也有很多,就不过多讲解了。

使用方式

官方文档中示例了两种主要使用方式,其一是直接在main.dart中改写:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //填入设计稿中设备的屏幕尺寸,单位dp
    return ScreenUtilInit(
      designSize: Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: () =>
          MaterialApp(
            //... other code
            builder: (context, widget) {
              //add this line
              ScreenUtil.setContext(context);
              return MediaQuery(
                //Setting font does not change with system font size
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: widget!,
              );
            },
            theme: ThemeData(
              textTheme: TextTheme(
                //要支持下面这个需要使用第一种初始化方式
                button: TextStyle(fontSize: 45.sp)
              ),
            ),
          ),
    );
  }
}

其二是在入口处、跟路由处、首页初始化一次:

lass MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'FlutterScreenUtil Demo'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    //设置尺寸(填写设计中设备的屏幕尺寸)如果设计基于360dp * 690dp的屏幕
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: Size(360, 690),
        context: context,
        minTextAdapt: true,
        orientation: Orientation.portrait);
    return Scaffold();
  }
}

官方建议使用第二种,但是在本项目中我们会在APP主题中也使用到这个依赖包的功能,因此我们使用第一种

改造main.dart

此时main.dart文件如下:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sliver_wp_flutter/pages/HomePage.dart';


// APP启动->运行main->运行 runApp->运行MyApp 8.认识main.dart

// APP打开之后将执行该方法 7.操刀main.dart
void main() {
  //该方法执行一个runAPP方法,runApp方法需要传入一个 Widget 7.操刀main.dart
  //runApp方法传入了 GetMaterialApp 教程 10.引入状态管理器Get
  //GetMaterialApp 引入了首页
  runApp(GetMaterialApp(home: HomePage()));
}

改为如下:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:sliver_wp_flutter/pages/HomePage.dart';

// APP启动->运行main->运行 runApp->运行MyApp 8.认识main.dart

void main() {
  //该方法执行一个runAPP方法,runApp方法需要传入一个 Widget 7.操刀main.dart
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //引入 ScreenUtilInit 教程 12.初始化依赖包 flutter_screenutil
    return ScreenUtilInit(
      minTextAdapt: true,//是否根据宽度/高度中的最小值适配文字
      splitScreenMode: true,
      designSize: const Size(360, 690), //设计稿中的屏幕尺
      builder: (BuildContext context, Widget? child) {
        return GetMaterialApp(
          //Get状态管理器 引入首页
          home: HomePage(),
        );
      },
    );
  }
}

总结

  1. 请务必一步步按照教程小节步骤走,否则你会看不懂部分代码
  2. flutter_screenutil是一款很成熟并且文档很多的插件,看应该能看懂

目录

  1. 说明
  2. 创建项目,并运行
  3. 项目目录结构
    1. pubspec.yaml
      1. 安装依赖包
  4. 安装项目依赖
  5. 操刀main.dart
  6. 认识mian.dart
  7. 初识MaterialApp
  8. 引入状态管理器Get
  9. 创建首页
  10. 初始化依赖包 flutter_screenutil
  11. 认识Scaffold

源码仓库地址:https://gitee.com/sliver-ring/sliver-wp-flutter

给TA打赏
共{{data.count}}人
人已打赏
APP开发

WordPress+Flutter开发APP教程:11.创建首页

2022-6-8 13:19:26

APP开发

WordPress+Flutter开发APP教程:13.认识Scaffold

2022-6-9 9:50:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索