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

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

概述

responsive_ui_layout 是一个支持Null安全的新Flutter包，用于实现响应式用户界面。

该包包含以下部分：

• ResponsiveConfig 类负责进行响应式的计算。
• 响应式扩展方法用于动态计算高度、宽度、字体大小和图像大小。

开始使用

首先，你需要初始化 ResponsiveConfig 类并传递设计尺寸（由设计师提供的基础屏幕宽度和高度）：

import 'package:example/welcome_screen.dart';
import 'package:flutter/material.dart';
import 'package:responsive_ui_layout/responsive_ui_layout.dart';

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return OrientationBuilder(
          builder: (context, orientation) {
            ResponsiveConfig(designScreenWidth: 375, designScreenHeight: 812)
                .init(constraints, orientation);
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              title: 'Flutter Responsive UI Example',
              // theme: AppTheme.lightTheme,
              home: WelcomeScreen(),
            );
          },
        );
      },
    );
  }
}

示例代码

下面是一个完整的示例代码，展示了如何使用 responsive_ui_layout 包来创建一个响应式的欢迎屏幕。

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

class WelcomeScreen extends StatefulWidget {
  WelcomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          "响应式UI",
          style: TextStyle(fontSize: 20.fontSize, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Colors.blueGrey,
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              child: Container(
                child: Text(
                  "欢迎来到Flutter响应式UI",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontSize: 20.fontSize, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            Container(
              width: 100.width,
              height: 100.height,
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}