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,
builder: (context , 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'),
);
}
3条答案
按热度按时间tkqqtvp11#
您可以使用flutter_screenutil(一个适应屏幕和字体大小的flutter插件。让您的UI在不同的屏幕尺寸下显示合理的布局)
bzzcjhmw2#
你可以安装这个软件包并在你的应用程序中使用它,它非常受欢迎,许多开发人员都在使用它,这是软件包的链接:https://pub.dev/packages/flutter_screenutil
1_在依赖项中的pubspec.yaml中安装软件包
字符串
2_导入main.dart中的包
型
3_使用screen_util Package 材质应用程序,并定义要使用的大小:
型
4_最后,你可以在你的应用程序的任何屏幕上使用它,通过添加.h到高度,.w到宽度,.sp到字体大小,.r到raduis来使它响应:
型
现在你可以使你的应用程序响应和改变任何屏幕或小部件或文本大小的基础上,你使用的设备的屏幕大小.
ctehm74n3#
您可以根据最大屏幕大小使用相对大小,而不是使用固定大小。
也有这样的包:https://pub.dev/packages/sizer
因为每个默认的固定大小的小部件,例如
Container(width: 100, height: 100)
,当然会根据屏幕的大小占用总可用屏幕空间的不同百分比。但是像
Column
内部的Expanded
这样的灵活小部件已经将其子部件的大小调整为可用空间的一小部分。还有一些小部件,比如
Text("Some long text...")
,在大型设备上可能只占用一行,但在较小的设备上则将其内容 Package 成两行或更多行。