应用场景
在开发模式下,可以通过device_preview模拟各种设备的UI效果(注:不具备各种设备的运行环境)。
在常规开发过程中,开发者需要对接UI设计图,一般尺寸为375×812。为了适配不同的设备的分辨率,可以通过flutter_screenutil进行屏幕适配。
代码
注:在Windows环境下运行代码
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:device_preview/device_preview.dart';
void main() {
runApp(
DevicePreview(
enabled: !kReleaseMode,
builder: (context) => const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// 初始化ScreenUtil
ScreenUtil.init(context, designSize: const Size(375, 812));
return MaterialApp(
useInheritedMediaQuery: true,
locale: DevicePreview.locale(context),
builder: DevicePreview.appBuilder,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo Home Page'),
),
body: Center(
child: Container(
width: 200.w,
height: 52.h,
color: Colors.red,
child: Center(
child: Text(
'设备宽度与设计稿比例:${ScreenUtil().scaleWidth},设备高度与设计稿比例:${ScreenUtil().scaleHeight}',
style: const TextStyle(color: Colors.white),
),
),
),
),
);
}
}
除非注明,否则均为呆小猴博客原创文章,转载必须以链接形式标明本文链接!付费资源为虚拟物品,一经出售,概不退款!
呆小猴 » Flutter:device_preview模拟各种iOS设备效果,并用flutter_screenutil适配屏幕
呆小猴 » Flutter:device_preview模拟各种iOS设备效果,并用flutter_screenutil适配屏幕