Flutter屏幕适配插件 flutter_screen_adaptation 的使用

用法

flutter_screen_adaptation 是一个用于 Flutter 应用程序屏幕适配的插件。通过该插件，开发者可以轻松地根据不同的屏幕分辨率调整 UI 元素的大小。

以下是一个完整的示例，展示如何在 Flutter 项目中使用 flutter_screen_adaptation 插件。

步骤说明

首先，在项目的 pubspec.yaml 文件中添加依赖项：
```
dependencies:
  flutter_screen_adaptation: ^版本号
```
然后，执行以下命令以更新依赖项：
```
flutter pub get
```
在代码中导入插件并初始化屏幕适配。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_screen_adaptation/flutter_screen_adaptation.dart'; // 导入插件

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 绑定
  await ScreenAdaptation.init(800, 600); // 初始化屏幕适配，设置基准分辨率（例如 800x600）
  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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'), // 设置标题
        ),
        body: Center(
          child: Container(
            width: 400.wdp, // 使用 wdp 进行宽度适配
            height: 300.hdp, // 使用 hdp 进行高度适配
            color: Colors.green, // 设置背景颜色为绿色
          ),
        ),
      ),
    );
  }
}

更多关于Flutter屏幕适配插件flutter_screen_adaptation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•14 天前

更多关于Flutter屏幕适配插件flutter_screen_adaptation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_screen_adaptation 是一个用于 Flutter 屏幕适配的插件，它可以帮助开发者根据不同的屏幕尺寸和密度来适配应用程序的 UI。以下是使用 flutter_screen_adaptation 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_screen_adaptation 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_screen_adaptation: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化插件

在 main.dart 文件中初始化 flutter_screen_adaptation 插件。通常，你需要在 runApp 之前进行初始化。

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

void main() {
  // 初始化屏幕适配插件
  ScreenAdaptation.init(
    designSize: Size(375, 812), // 设计稿的尺寸（通常以 iPhone 11 为基准）
    allowFontScaling: true, // 是否允许字体缩放
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Adaptation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 使用适配工具

在布局中使用 ScreenAdaptation 提供的工具来适配尺寸、字体大小等。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen Adaptation Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, World!',
              style: TextStyle(
                fontSize: ScreenAdaptation.setSp(16), // 设置字体大小
              ),
            ),
            SizedBox(height: ScreenAdaptation.setHeight(20)), // 设置高度
            Container(
              width: ScreenAdaptation.setWidth(200), // 设置宽度
              height: ScreenAdaptation.setHeight(100), // 设置高度
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Adapted Box',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: ScreenAdaptation.setSp(14),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}