Flutter屏幕适配插件adaptable_screen的使用

介绍

本README描述了该插件。如果你将此包发布到pub.dev，那么此README的内容将会出现在你的包的首页。

为了了解更多如何编写好的包README的信息，请查看 撰写包页面指南。

对于一般开发包的信息，请参阅Dart的 创建库包指南 和 Flutter的 开发包和插件指南。

该插件根据UI设计原型的大小和组件放置的窗口大小来缩放尺寸。

开始使用

添加依赖

在你的包的pubspec.yaml文件中添加以下依赖：

dependencies:
  adaptable_screen: ^0.0.4

然后安装依赖：

$ flutter pub get

使用方法

要根据设计构建时的大小设置宽度和高度，可以使用AdaptableScreenUtils.init函数初始化大小。此函数应在应用程序启动时调用。

void main() {
  AdaptableScreenUtils.init(
    heightUIDisign: 1000,
    widthUIDisign: 956,
  );
  runApp(const MyApp());
}

高度适配

使用.h属性基于窗口大小缩放高度：

Container(
  height: 10.h
)

宽度适配

使用.w属性基于窗口大小缩放宽度：

Container(
  width: 10.w
)

文本适配

使用.ssp属性基于窗口大小缩放文本大小。此函数可以根据窗口大小改变字体大小：

Text(
  "Text Exemplo",
  style: TextStyle(fontSize: 15.ssp),
)

文本适配（另一种方式）

使用.sp属性基于窗口大小缩放文本大小：

Text(
  "Text Exemplo",
  style: TextStyle(fontSize: 15.ssp),
)

圆角适配

使用.r属性基于最小窗口大小缩放圆角半径：

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(10.r),
  ),
  height: 50.h,
  width: 100.w,
  child: Center(
    child: Text(
      "Text Exemplo",
      style: TextStyle(fontSize: 15.sp),
    ),
  ),
)

完整示例

如果你想看到一个简单的使用示例，可以查看/example文件夹。

完整的示例代码如下：

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

void main() {
  AdaptableScreenUtils.init(
    heightUIDisign: 1000,
    widthUIDisign: 956,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(33.r),
              ),
              height: 160.h,
              width: 200.w,
              child: Center(
                child: Text(
                  "Text Exemplo",
                  style: TextStyle(fontSize: 20.ssp),
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(10.r),
              ),
              height: 50.h,
              width: 100.w,
              child: Center(
                child: Text(
                  "Text Exemplo",
                  style: TextStyle(fontSize: 15.sp),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}