美文网首页
【Flutter】release模式下页面空白,布局不显示问题

【Flutter】release模式下页面空白,布局不显示问题

作者: 西瓜吃了吗 | 来源:发表于2024-07-28 15:25 被阅读0次

    如果你适配使用的是 :

    flutter_screenutil: ^5.9.3
    

    并且你将 ScreenUtil.init 放在 MyApp 中进行初始化,那么恭喜你,遇到了和我一样的错误。
    我接手的别人的项目,这个错误在debug模式下运行没有问题,当打release包后,安卓安装运行发现页面空白,布局不显示,然后调试,发现ScreenUtil这个插件适配代码无效。
    原因就是初始化方式错误,官方提供了两种初始化方法:
    第一种,ScreenUtilInit:

    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
        return ScreenUtilInit(
          designSize: const Size(360, 690),
          minTextAdapt: true,
          splitScreenMode: true,
          // Use builder only if you need to use library outside ScreenUtilInit context
          builder: (_ , child) {
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              title: 'First Method',
              // You can use the library anywhere in the app even in theme
              theme: ThemeData(
                primarySwatch: Colors.blue,
                textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
              ),
              home: child,
            );
          },
          child: const HomePage(title: 'First Method'),
        );
      }
    }
    

    第二种,ScreenUtil.init(官方推荐混合开发使用第二种方法):

    void main() async {
      // Add this line
      await ScreenUtil.ensureScreenSize();
      runApp(MyApp());
    }
    ...
    MaterialApp(
      ...
      builder: (ctx, child) {
        ScreenUtil.init(ctx);
        return Theme(
          data: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)),
          ),
          child: HomePage(title: 'FlutterScreenUtil Demo'),
        );
      },
    )
    
    class 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) {
        //Set the fit size (fill in the screen size of the device in the design) 
        //If the design is based on the size of the 360*690(dp)
        ScreenUtil.init(context, designSize: const Size(360, 690));
        ...
      }
    }
    

    ScreenUtil.init这个方法一般放在根路由即第一个页面加载的时候进行初始化, 因为这个时候还没加载 MaterialApp 无法使用 MediaQuery.of(context ) 获取到屏幕宽高。

    相关文章

      网友评论

          本文标题:【Flutter】release模式下页面空白,布局不显示问题

          本文链接:https://www.haomeiwen.com/subject/pahihjtx.html