Flutter布局插件flutter_flexui的使用

flutter_flexui 是一个用于构建适应不同屏幕尺寸的灵活UI的Flutter插件。它支持自适应文本大小、根据屏幕尺寸替换小部件等功能。

特性

• 自适应文本大小
• 根据不同的屏幕尺寸替换小部件
• 自适应行（改变列数）
• 设备类型检测，包括电视

开始使用

要在项目中使用该插件，请在 pubspec.yaml 文件中添加 flutter_flexui 作为依赖项：

dependencies:
  flutter_flexui: <latest_version>

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

导入库

import 'package:flutter_flexui/flutter_flexui.dart';

示例Demo

下面是一个完整的示例demo，展示了如何使用 flutter_flexui 中的主要组件。

完整示例代码

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

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

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

  @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({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: <Widget>[
                  const FlexText(
                    'You have pushed the button this many times:',
                    styleXs: TextStyle(fontWeight: FontWeight.w100, fontSize: 10),
                    styleSm: TextStyle(fontWeight: FontWeight.w200, fontSize: 12),
                    styleMd: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                    styleLg: TextStyle(fontWeight: FontWeight.w900, fontSize: 22),
                  ),
                  FlexText(
                    '$_counter',
                    styleXs: const TextStyle(fontWeight: FontWeight.w100, fontSize: 10),
                    styleSm: const TextStyle(fontWeight: FontWeight.w200, fontSize: 12),
                    styleMd: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                    styleLg: const TextStyle(fontWeight: FontWeight.w900, fontSize: 22),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("FlexWidget", style: Theme.of(context).textTheme.headlineMedium),
            ),
            Center(
              child: FlexWidget(
                xs: Container(color: Colors.green, width: 200.0, height: 200.0),
                sm: Container(color: Colors.orange, width: 200.0, height: 200.0),
                md: Container(color: Colors.red, width: 200.0, height: 200.0),
                lg: Container(color: Colors.purple, width: 200.0, height: 200.0),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("FlexRow", style: Theme.of(context).textTheme.headlineMedium),
            ),
            FlexRow(
              colLg: 6,
              colMd: 3,
              colSm: 2,
              colXs: 1,
              colMainAxisAlignment: MainAxisAlignment.spaceEvenly,
              colVerticalDirection: VerticalDirection.down,
              colMainAxisSize: MainAxisSize.max,
              rowMainAxisAlignment: MainAxisAlignment.spaceAround,
              rowVerticalDirection: VerticalDirection.down,
              rowMainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text("Width: ${context.screenWidth}"),
                Text("Height: ${context.screenHeight}"),
                Text("PixelRation: ${context.pixelRatio}"),
                Text("Diagonal: ${context.diagonalInches}"),
                Text("Screen: ${context.screenSize.toString()}"),
                FutureBuilder<DeviceType>(
                  future: context.deviceType,
                  builder: (context, snapshot) {
                    return Text("Device: ${snapshot.data?.toString()}");
                  },
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

主要组件介绍

FlexRow

FlexRow 是一个自适应行布局组件，可以根据屏幕宽度调整列数。

FlexRow(
  colLg: 6,
  colMd: 3,
  colSm: 2,
  colXs: 1,
  colMainAxisAlignment: MainAxisAlignment.spaceEvenly,
  colVerticalDirection: VerticalDirection.down,
  colMainAxisSize: MainAxisSize.max,
  rowMainAxisAlignment: MainAxisAlignment.spaceAround,
  rowVerticalDirection: VerticalDirection.down,
  rowMainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Text("Width: ${context.screenWidth}"),
    Text("Height: ${context.screenHeight}"),
    Text("PixelRation: ${context.pixelRatio}"),
    Text("Diagonal: ${context.diagonalInches}"),
    Text("Screen: ${context.screenSize.toString()}"),
    FutureBuilder<DeviceType>(
      future: context.deviceType,
      builder: (context, snapshot) {
        return Text("Device: ${snapshot.data?.toString()}");
      },
    ),
  ],
);

FlexText

FlexText 是一个自适应文本组件，可以根据屏幕大小调整字体样式和大小。

FlexText(
  'Test',
  styleSm: TextStyle(fontWeight: FontWeight.w200, fontSize: 12),
  styleMd: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
  styleLg: TextStyle(fontWeight: FontWeight.w900, fontSize: 22),
);

FlexWidget

FlexWidget 可以根据设备屏幕大小显示不同的小部件。

FlexWidget(
  xs: Container(color: Colors.green, width: 200.0, height: 200.0),
  sm: Container(color: Colors.orange, width: 200.0, height: 200.0),
  md: Container(color: Colors.red, width: 200.0, height: 200.0),
  lg: Container(color: Colors.purple, width: 200.0, height: 200.0),
);

FlexBuilder

FlexBuilder 提供了基于屏幕尺寸构建小部件的能力。

FlexBuilder(
  builder: (context, screen) {
    return Container();
  },
);

工具函数

Screen

提供了获取屏幕信息的各种方法：

// 获取屏幕尺寸类型
context.screenSize;

// 获取MediaQueryData
context.mediaQuery;

// 获取屏幕方向
context.orientation;

// 屏幕宽度
context.screenWidth;

// 屏幕高度
context.screenHeight;

// 像素比例
context.pixelRatio;

// 屏幕对角线长度
context.diagonal;

// 屏幕对角线英寸
context.diagonalInches;

// 状态栏高度
context.statusBarHeight;

// 底部栏高度
context.bottomBarHeight;

// 根据屏幕尺寸获取值
context.valueByScreen(xsObject, smObject, mdObject, lgObject);

Device

提供了判断设备类型的函数：

context.isDesktop;
context.isTablet;
context.isMobile;
context.isWeb;
context.isWindows;
context.isLinux;
context.isMacOS;
context.isAndroid;
context.isFuchsia;
context.isIOS;

// 获取设备类型
context.deviceType;

通过这些功能，您可以轻松地为不同屏幕尺寸和设备类型创建灵活且响应式的UI。