flutter:适配屏幕(flutter_screenutil: ^5.6.1 / flutter 3.7.0 )
flutter 屏幕 适配 5.6 3.7
2023-09-14 09:01:15 时间
一,flutter_screenutil库的地址:
https://pub.dev/packages/flutter_screenutil
代码地址:
https://github.com/OpenFlutter/flutter_screenutil
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,在项目中引入
在pubspec.yaml中添加:
flutter_screenutil: ^5.6.1
效果如图:
![](https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230208144952312-35110492.png)
然后点击 Pub get 下载库
三,编写代码:
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { //设置尺寸(填写设计中设备的屏幕尺寸)如果设计基于750dp * 1334dp的屏幕 ScreenUtil.init( context, designSize: Size(750, 1334) ); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: <Widget>[ Row( children: <Widget>[ Container( decoration: new BoxDecoration( color: Colors.blue, ), width:345.w, height: 200.w, margin:EdgeInsets.only(top:20.w,left:20.w), ), Container( decoration: new BoxDecoration( color: Colors.red, ), width:345.w, height: 200.w, margin:EdgeInsets.only(top:20.w,left:20.w), ), ]), Row( children: <Widget>[ Container( decoration: new BoxDecoration( color: Colors.green, ), width:345.w, height: 200.w, margin:EdgeInsets.only(top:20.w,left:20.w), alignment: Alignment.topLeft, ), ]), ], ), ); } }
四,测试效果
![](https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230208144952339-1873860153.png)
五,查看flutter的版本:
liuhongdi@liuhongdideMBP ~ % flutter --version Flutter 3.7.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision b06b8b2710 (2 weeks ago) • 2023-01-23 16:55:55 -0800 Engine • revision b24591ed32 Tools • Dart 2.19.0 • DevTools 2.20.1
相关文章
- Flutter之事件节流、防抖封装
- flutter系列之:用来管理复杂状态的State详解
- flutter 之Text介绍
- flutter 屏幕适配
- flutter中的多线程
- mix-一个让flutter更方便的库
- Flutter 实战-快速实现音视频通话应用
- 一天搞定:Flutter + ChatGPT,打造智能聊天机器人
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【Flutter】打开第三方 Flutter 项目
- 【Flutter】FutureBuilder 异步编程 ( FutureBuilder 构造方法 | AsyncSnapshot 异步计算 )
- 【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 MethodChannel 通信 )
- 为什么除了Flutter之外,我们还需要另一个跨平台开发框架?
- Flutter这七大缺陷你是否有注意到?