Flutter:device_preview模拟各种iOS设备效果,并用flutter_screenutil适配屏幕

 

Pub地址:device_preview         flutter_screenutil

应用场景

在开发模式下,可以通过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适配屏幕

发表回复

呆小猴 · 专注安全学习与分享

关于作者 联系作者