Flutter屏幕适配插件size_adapter的使用

为什么使用Size Adapter？

告别Flutter应用中的响应式设计难题！
引入Size Adapter——一种能够轻松适应不同屏幕尺寸的UI组件解决方案。

重要提示

当在Chrome或任何模拟移动设备的方法中测试您的Flutter应用程序时，请确保在切换到移动设备模式后执行热重载。这对于size_adapter准确地适应新设备尺寸并提供预期的用户体验至关重要。

平台支持

平台	支持情况
Android	✅
IOS	✅
Tablet	✅
Web	❌
Desktop	❌

使用方法

要将此库添加到您的项目中：

在您的pubspec.yaml文件中添加依赖项：
```
dependencies:
  size_adapter: latest
```

在您的Dart代码中导入库：

import 'package:size_adapter/size_adapter.dart';

概述

此Flutter包简化了响应式设计，使您的UI在任何移动设备上看起来都很出色。查看以下演示。

![Demo Screen](provide png)

如何使用

SizeAdapter(
  /// 375.0 是设计宽度
  /// 812.0 是设计高度
  designSize: const Size(375.0, 812.0),
  /// 44.0 是设计状态栏高度 
  /// 默认为 [0.0]
  designStatusBarHeight: 44.0,
  /// 28.0 是设计底部栏高度
  /// 默认为 [0.0]
  designBottomBarHeight: 28.0,
  child: MaterialApp(
    title: 'My App',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(primarySwatch: Colors.indigo),
    home: const HomeScreen(),
  ),
);

贡献指南

我很高兴接受您的贡献 ❤️

如果您遇到任何问题，欢迎在GitHub上打开一个问题。如果有新的想法也欢迎提出。如果您修复了一个bug或实现了一个功能，请发送一个Pull Request。

作者

Kamran Khan

示例代码

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

void main() => runApp(const MyApp());

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

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizeAdapter(
      designSize: const Size(375.0, 812.0),
      designStatusBarHeight: 34.0,
      designHomeBarHeight: 28.0,
      child: MaterialApp(
        title: 'Size Adapter',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.indigo),
        home: const HomeScreen(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return Scaffold(
        appBar: const AppBarWidget(),
        drawer: const Drawer(),
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.ph, vertical: 20.pv),
          child: Column(
            children: [
              Container(
                width: 335.w,
                height: 62.h,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: const Color(0xFFE0E0E0),
                  borderRadius: BorderRadius.circular(8.r),
                ),
                child: Text(
                  'This is heading',
                  style:
                      TextStyle(fontSize: 32.sp, fontWeight: FontWeight.w600),
                ),
              ),
              SizedBox(height: 20.h),
              Row(
                children: [
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'Simple',
                      style: TextStyle(
                          fontSize: 40.sp, fontWeight: FontWeight.w700),
                    ),
                  ),
                  SizedBox(width: 15.w),
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'This\nis\nsimple\ntext',
                      style: TextStyle(fontSize: 18.sp),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20.h),
              Row(
                children: [
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'This is\nsimple\ntext',
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w700),
                    ),
                  ),
                  SizedBox(width: 15.w),
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'simple\ntext',
                      style: TextStyle(fontSize: 32.sp),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20.h),
              Row(
                children: [
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'This is simple text',
                      style: TextStyle(fontSize: 10.sp),
                    ),
                  ),
                  SizedBox(width: 15.w),
                  Container(
                    width: 160.w,
                    height: 160.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Text(
                      'This is simple text',
                      style: TextStyle(fontSize: 14.sp),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          width: 375.w,
          height: 51.h,
          color: Theme.of(context).primaryColor,
          padding: EdgeInsets.symmetric(horizontal: 20.ph),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.home, color: Colors.white, size: 28.h),
              Icon(Icons.search, color: Colors.white, size: 28.h),
              Icon(Icons.bookmark, color: Colors.white, size: 28.h),
              Icon(Icons.person, color: Colors.white, size: 28.h),
            ],
          ),
        ),
      );
    });
  }
}

class AppBarWidget extends StatelessWidget implements PreferredSizeWidget {
  const AppBarWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AppBar(
      elevation: 0.4,
      iconTheme: IconThemeData(size: 24.h, color: Colors.white),
      title: Text('Size Adapter',
          style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.sp)),
      actions: [
        Padding(
          padding: EdgeInsets.only(right: 20.ph),
          child: Icon(Icons.notifications, size: 24.h),
        ),
        Padding(
          padding: EdgeInsets.only(right: 20.ph),
          child: Icon(Icons.share, size: 24.h),
        ),
        Padding(
          padding: EdgeInsets.only(right: 20.ph),
          child: Icon(Icons.search, size: 24.h),
        ),
      ],
    );
  }

  // TODO 将56.h替换为您设计的应用程序栏高度
  [@override](/user/override)
  Size get preferredSize => Size.fromHeight(56.h);
}

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

gougou168 1楼

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

在Flutter开发中，屏幕适配是一个常见的问题，特别是在不同尺寸和分辨率的设备上确保UI的一致性和美观性。size_adapter 是一个用于屏幕适配的插件，它能够帮助开发者简化适配工作。以下是如何在Flutter项目中使用 size_adapter 的一个代码示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 size_adapter 的依赖：

dependencies:
  flutter:
    sdk: flutter
  size_adapter: ^x.y.z  # 请替换为最新版本号

2. 初始化 SizeAdapter

在你的主项目文件（通常是 main.dart）中，初始化 SizeAdapter。

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

void main() {
  // 初始化 SizeAdapter
  SizeConfig().init(context);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 使用 SizeAdapter 进行屏幕适配

在需要使用屏幕适配的地方，通过 SizeConfig 类提供的属性进行适配。例如，设置按钮大小、文本大小等。

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SizeConfig sizeConfig = SizeConfig();

    return Scaffold(
      appBar: AppBar(
        title: Text('Size Adapter Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(sizeConfig.blockSizeHorizontal * 3),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 示例：设置按钮大小
            SizedBox(height: sizeConfig.blockSizeVertical * 2),
            ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
              style: ElevatedButton.styleFrom(
                padding: EdgeInsets.symmetric(
                  horizontal: sizeConfig.blockSizeHorizontal * 10,
                  vertical: sizeConfig.blockSizeVertical * 3,
                ),
              ),
            ),

            // 示例：设置文本大小
            SizedBox(height: sizeConfig.blockSizeVertical * 2),
            Text(
              'Hello, Size Adapter!',
              style: TextStyle(
                fontSize: sizeConfig.blockSizeHorizontal * 4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 深入理解 SizeConfig 属性

SizeConfig 类提供了几个关键的属性，用于屏幕适配：

blockSizeHorizontal: 根据屏幕宽度划分的单位尺寸（横向）。
blockSizeVertical: 根据屏幕高度划分的单位尺寸（纵向）。
screenWidth: 屏幕宽度。
screenHeight: 屏幕高度。
safeBlockHorizontal: 安全区域横向单位尺寸。
safeBlockVertical: 安全区域纵向单位尺寸。

这些属性可以帮助你在不同设备上实现一致的UI设计。

注意事项

在使用 SizeConfig 之前，确保已经调用 SizeConfig().init(context); 进行初始化。
SizeAdapter 插件提供了一种相对简单的屏幕适配方案，但在某些复杂场景下，可能需要结合其他布局技术或自定义适配逻辑。

通过以上步骤，你可以在Flutter项目中有效地使用 size_adapter 插件进行屏幕适配。