Flutter使用ScreenUtil获取屏幕宽高初始化报错

报错如下

128899D681EF08D3B35FCE1D9A503CDD

原因

我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是,在初始化未装载视图时,第一次获取时拿不到,会出现如上的崩溃。

解决方案

import 'package:flutter_screenutil/screenutil_init.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
@override
Widget build(BuildContext context) {
  //使用屏幕初始化包裹整个body布局
  return ScreenUtilInit(
    //设置初始化屏幕大小
    designSize: Size(375, 812),
    builder: () => Scaffold(
      backgroundColor: WBColors.color_f4f5f7,
      body: Container(
          height: 263.5,
          width: ScreenUtil().screenWidth,
        )
    )
  );
}
  • 使用ScreenUtilInit屏幕初始化组件包裹整个页面布局最外层

  • 设置屏幕初始大小

  • body里面可任意使用获取屏幕宽高的API了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您好!对于封装一个flutter_screenutil,您可以按照以下步骤进行操作: 1. 首先,在项目的`pubspec.yaml`文件中添加`flutter_screenutil`依赖项。可以在`dependencies`部分添加以下代码: ```yaml dependencies: flutter_screenutil: ^5.0.0 ``` 2. 在您的项目中创建一个名为`screen_util.dart`的文件,用于封装`flutter_screenutil`。 3. 在`screen_util.dart`文件中导入必要的库: ```dart import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter/material.dart'; ``` 4. 创建一个名为`ScreenUtil`的类,并添加以下静态方法: ```dart class ScreenUtil { static void init(BuildContext context) { FlutterScreenUtil.init(context); } static double setWidth(double width) { return FlutterScreenUtil().setWidth(width); } static double setHeight(double height) { return FlutterScreenUtil().setHeight(height); } static double setSp(double fontSize) { return FlutterScreenUtil().setSp(fontSize); } } ``` 5. 在您的项目中的`main.dart`文件中,使用`ScreenUtil.init(context)`初始化`ScreenUtil`,例如: ```dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ScreenUtil.init(context); return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } ``` 6. 现在,您可以在项目的任何地方使用`ScreenUtil.setWidth`、`ScreenUtil.setHeight`和`ScreenUtil.setSp`来设置宽度、高度和字体大小,例如: ```dart Container( width: ScreenUtil.setWidth(200), height: ScreenUtil.setHeight(100), child: Text( 'Hello', style: TextStyle(fontSize: ScreenUtil.setSp(20)), ), ), ``` 通过以上步骤,您可以封装一个简单的`flutter_screenutil`工具类,方便在项目中使用屏幕适配功能。希望对您有所帮助!如果您还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值