【flutter项目实战】第八节在flutter项目中实现屏幕适配

最新推荐文章于 2025-03-03 14:26:54 发布

Call me 兽医

最新推荐文章于 2025-03-03 14:26:54 发布

阅读量1.2k

点赞数 9

分类专栏： flutter实战文章标签： flutter 开发语言

本文链接：https://blog.youkuaiyun.com/winni_a/article/details/137038254

版权

本文介绍了在Flutter中如何使用flutter_screenutil库实现屏幕适配，包括原理分析、包引入、基本配置以及如何在代码中使用ScreenUtil类进行尺寸和字体自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在flutter中，屏幕适配非常简单，只需要使用一个扩展即可`flutter_screenutil`

一原理分析

flutter_screenutil的逻辑就是，你设置好你的UI的屏幕尺寸，然后她会根据你后续设置的值
和当前屏幕的比例进行计算并赋值

二如何使用

引入包

使用 flutter pub add flutter_screenutil 命令安装最新版
或者直接在pubspec.yaml 里手动引入flutter_screenutil: ^5.9.0

基本配置

我们需要在main.dart文件里进行配置后，才可以在页面中使用
具体配置方法如下、

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';

import 'app/routes/app_pages.dart';

void main() {
   
  runApp(
    ScreenUtilInit(
      designSize: const Size(1080, 2400), //设计稿宽高的px
      minTextAdapt: true,       //是否根据宽度/高度中的最小值适配文字
      splitScreenMode: true,   //支持分屏尺寸
      builder: (context,child){
   
        return GetMaterialApp(
          title: "Application",
          initialRoute: AppPages.INITIAL,
          getPages: AppPages.routes,
        );
      },
    ),