Flutter响应式布局插件flutter_easy_responsive的使用

flutter_easy_responsive 插件可以帮助开发者根据 Figma 设计快速计算出 Flutter 应用中的宽度和高度。接下来，我们将详细说明如何安装、配置并使用该插件。

安装插件

首先，在 pubspec.yaml 文件中添加插件：

dependencies:
  flutter:
    sdk: flutter
  flutter_easy_responsive: ^1.0.0 # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

导入插件

在需要使用该插件的 Dart 文件中导入：

import 'package:flutter_easy_responsive/flutter_easy_responsive.dart';

初始化插件

在应用启动时，调用初始化函数以设置设计屏幕的宽度和高度。通常在 main() 函数或 build() 方法之前调用。

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化插件
    EasyResponsive().initialize(
      context: context,
      designScreenWidth: 375,
      designScreenHeight: 812,
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

初始化示例图

初始化示例：
<img src="https://github.com/thanhdang198/easy_responsive/blob/main/demo_code.png?raw=true" alt="demo code">

获取设计屏幕宽度和高度

可以通过以下方式获取设计屏幕的宽度和高度：

获取设计屏幕宽度和高度示例：
<img src="https://github.com/thanhdang198/easy_responsive/blob/main/design_guide.png?raw=true" alt="design guide">

使用插件

在布局组件时，可以使用 .w 和 .h 属性来设置宽度和高度。例如：

Container(
  color: Colors.red,
  width: 120.w,  // 使用 .w 属性设置宽度
  height: 120.h, // 使用 .h 属性设置高度
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text('You have pushed the button this many times:'),
      Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),
    ],
  ),
)

如果设计中的宽度和高度相等，则可以选择只使用 .w 或 .h 属性。建议向设计师确认宽度和高度的约束条件。

完整示例代码

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    EasyResponsive().initialize(
      context: context,
      designScreenWidth: 375,
      designScreenHeight: 812,
    );
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  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)
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {});
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          width: 120.w,
          height: 120.h,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('You have pushed the button this many times:'),
              Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}