Flutter屏幕适配插件easy_screenutil的使用

easy_screenutil

A flutter plugin for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes!

注意: 这个插件简单且开放于未来的改进。欢迎您的反馈。

使用方法

1. 添加依赖

在安装之前，请检查最新版本。如果新版本有问题，请使用旧版本。

dependencies:
  flutter:
    sdk: flutter
  # 添加 easy_screenutil
  easy_screenutil: ^{最新版本}

2. 在Dart代码中添加以下导入

import 'package:easy_screenutil/easy_screenutil.dart';

初始化方式一：通过 ScreenUtil

void main() {
  // 初始化屏幕适配，设置设计宽度为375（通常基于iPhone 6/7/8的设计尺寸）
  ScreenUtil.ensureInitialized(designWidth: 375);
  runApp(const MyApp());
}

初始化方式二：通过 ScreenUtil.builder

[@override](/user/override)
Widget build(BuildContext context) {
  return const MaterialApp(
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    // 初始化屏幕适配
    builder: ScreenUtil.builder,
  );
}

完整示例代码

以下是一个完整的示例代码，展示如何使用 easy_screenutil 插件进行屏幕适配。

import 'package:flutter/material.dart';
import 'package:easy_screenutil/easy_screenutil.dart';

void main() {
  // 初始化屏幕适配，设置设计宽度为375
  ScreenUtil.ensureInitialized(designWidth: 375);
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      // 初始化屏幕适配
      builder: ScreenUtil.builder,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 10),
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    color: Colors.yellow,
                    child: const Text('1/3屏宽'),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    color: Colors.green,
                    child: const Text('1/3屏宽'),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    color: Colors.blue,
                    child: const Text('1/3屏宽'),
                  ),
                )
              ],
            ),
            Container(
              height: 50,
              width: 125,
              alignment: Alignment.center,
              color: Colors.pink,
              child: const Text('125宽度'),
            ),
            Container(
              height: 50,
              width: 375,
              alignment: Alignment.center,
              color: Colors.orange,
              child: const Text('375宽度'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}