Flutter自适应布局插件flutter_adaptive_layout的使用

Flutter自适应布局插件flutter_adaptive_layout的使用

flutter_adaptive_layout 是一个方便实现基于屏幕尺寸的布局的小部件。

特性

• 提取设备的屏幕大小。
• 应用提供的（或覆盖的）屏幕大小断点。
• 渲染根据提取的屏幕大小提供的布局变体。

示例

以下是不同设备上的布局效果：

iPhone 14	iPad Mini	iPad Pro 12"

开始使用

安装库

flutter pub add flutter_adaptive_layout

导入库

import 'package:flutter_adaptive_layout/flutter_adaptive_layout.dart';

使用 AdaptiveLayout 构建器

Widget build(BuildContext context) {
  return AdaptiveLayout(
    smallBuilder: (context, child) => child!,
    mediumBuilder: (context, child) =>
        Center(
          child: Material(
            color: Colors.white,
            elevation: 4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: ConstrainedBox(
              constraints: BoxConstraints.tight(const Size.square(400)),
              child: child,
            ),
          ),
        ),
    largeBuilder: (context, child) =>
        Center(
          child: Material(
            color: Colors.white,
            elevation: 4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: ConstrainedBox(
              constraints: BoxConstraints.tight(const Size.square(600)),
              child: child,
            ),
          ),
        ),
    child: const MyHomePage(),
  );
}

使用方法

在 /example 目录下可以找到工作示例。默认断点设置为 400 用于小到中等屏幕，600 用于中到大屏幕。你也可以通过提供 smallBreakpoint 和 mediumBreakpoint 变量来自定义这些断点。

Widget build(BuildContext context) {
  return AdaptiveLayout(
    qualifier: BreakpointsQualifier(
      smallBreakpoint: 300,
      mediumBreakpoint: 700,
    ),
    smallBuilder: (context, child) => child!,
    mediumBuilder: (context, child) =>
        Center(
          child: Material(
            color: Colors.white,
            elevation: 4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: ConstrainedBox(
              constraints: BoxConstraints.tight(const Size.square(400)),
              child: child,
            ),
          ),
        ),
    largeBuilder: (context, child) =>
        Center(
          child: Material(
            color: Colors.white,
            elevation: 4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: ConstrainedBox(
              constraints: BoxConstraints.tight(const Size.square(600)),
              child: child,
            ),
          ),
        ),
    child: const MyHomePage(),
  );
}

你也可以通过实现自己的 ScreenSizeQualifier 来覆盖默认断点。

或者，你可以通过包裹你的小部件树来覆盖默认断点：

Widget build(BuildContext context) {
  return BreakpointsSetting(
    smallScreenBreakpoint: 200,
    mediumScreenBreakpoint: 500,
    child: MaterialApp(...),
  );
}

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_adaptive_layout/flutter_adaptive_layout.dart';
import 'package:flutter_adaptive_layout_example/home_page.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo Home Page'),
        ),
        body: AdaptiveLayout(
          smallBuilder: (context, child) => child!,
          mediumBuilder: (context, child) =>
              Center(
                child: Material(
                  color: Colors.white,
                  elevation: 4,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: ConstrainedBox(
                    constraints: BoxConstraints.tight(const Size.square(400)),
                    child: child,
                  ),
                ),
              ),
          largeBuilder: (context, child) =>
              Center(
                child: Material(
                  color: Colors.white,
                  elevation: 4,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: ConstrainedBox(
                    constraints: BoxConstraints.tight(const Size.square(600)),
                    child: child,
                  ),
                ),
              ),
          child: const MyHomePage(),
        ),
      ),
    );
  }
}