Flutter集成Bootstrap 5最新样式插件flutterbootstrap5latest的使用

flutterbootstrap5latest 包在原 flutter_bootstrap5 包的基础上进行了些许改动：

Flutter Bootstrap 5 最新 🚀

此包用于支持使用Flutter创建响应式Web应用。 它基于著名的CSS框架Bootstrap 5，并提供了许多Bootstrap中的功能。

如果您喜欢这个包，可以给个赞 ❤️ 和收藏 ⭐ 来支持该项目！

如果您想快速了解最重要的功能并直接进行测试，您可以在这里进行：

FLUTTER BOOTSTRAP 5 示例网站

小示例

开始使用 #

配置Flutter Bootstrap5 #

要将 `Flutter Bootstrap5` 应用于您的应用程序的任何地方，只需将您的 `MaterialApp` 包裹在 `[FlutterBootstrap5]` 小部件中即可。

  FlutterBootstrap5(
    builder: (ctx) => MaterialApp(...),
  );

应用程序主题 #

您可以根据需求自定义 `Flutter Bootstrap5`。您也可以保留默认值以获得Bootstrap5应用程序的默认行为。

目前支持以下定制选项：

断点（BreakPoints）

要设置自己的断点，您可以简单地将 BreakPoints 类传递给 [FlutterBootstrap5] 小部件。默认情况下，使用的是Bootstrap5 CSS的当前断点。

class _BootstrapBreakPoints {
  static const BreakPoint xs = BreakPoint(minWidth: 0, maxWidth: 576);
  static const BreakPoint sm = BreakPoint(minWidth: 576, maxWidth: 768);
  static const BreakPoint md = BreakPoint(minWidth: 768, maxWidth: 992);
  static const BreakPoint lg = BreakPoint(minWidth: 992, maxWidth: 1200);
  static const BreakPoint xl = BreakPoint(minWidth: 1200, maxWidth: 1400);
  static const BreakPoint xxl =
      BreakPoint(minWidth: 1400, maxWidth: double.infinity);
}

容器断点（Container BreakPoints）

除了正常的断点外，您还可以为 [FB5Container] 定义自己的断点。这些断点确定 [FB5Container] 在特定断点时应具有的宽度。

默认情况下，使用的是Bootstrap5 CSS的当前容器断点。

class _BootstrapContainerBreakPoints {
  static const double xs = double.infinity;
  static const double sm = 540;
  static const double md = 720;
  static const double lg = 960;
  static const double xl = 1140;
  static const double xxl = 1320;
}

默认字体大小（Default Fontsize）

通过 defaultFontSize 参数，您可以指定用于计算 "rem" 值的默认字体大小。Bootstrap CSS 使用 rem 来计算边距、填充和字体大小。类似地，这些值在 Flutter Bootstrap5 中也根据 defaultFontSize 进行计算。

默认值为 16.0。

字体排版（Typography）

Flutter Bootstrap5 使用一种基于Bootstrap CSS的字体大小计算机制。因此，字体大小会根据屏幕大小动态变化。

要自定义此行为，您可以将 [FB5Typography] 类传递给 FlutterBootstrap5。

在您的 `MaterialApp` 中使用主题 #

在配置 `[FlutterBootstrap5]` 之后，现在可以将主题传递给 `MaterialApp`，以便充分利用 `Flutter Bootstrap 5`。

MaterialApp(
  title: 'Flutter Bootstrap5 Demo',
  theme: BootstrapTheme.of(ctx).toTheme([PASS YOUR THEME TO OVERRIDE BOOTSTRAP THEME IF YOU WANT TO]),
  home: const Home(),
),

现在让我们谈谈功能 #

目前支持的Bootstrap类 #

注意：响应支持表示是否支持 -xs, -sm, -md, -lg, -xl 和 -xxl

描述	基础类	变体	响应支持
列宽	col	col-{1-12}	✓
每行的列数	row-cols	row-cols-{1-*}	✓
填充	p	p-{1-5}, p{t,b,s,e,x,y}-{1-5}, p{t,b,s,e,x,y}-custom-{0.0-*}	✓
边距	m	m-{1-5}, m{t,b,s,e,x,y}-{1-5}, m{t,b,s,e,x,y}-custom-{0.0-*}	✓
网格间距	g	g-{1-5}, g{x,y}-{1-5}, g{x,y}-custom-{0.0-*}	✓
排序	order	order-{0-*}	✓
显示	d	d-none, d-block	✓
对齐项目	align-items	align-items-{start, center, end}	✓
对齐自身	align-self	align-self-{start, center, end}	✓
对齐内容	justify-content	justify-content-{start, around, between, evenly, center, end}	✓

小部件 #

FB5Container #

`FB5Container` 是 `FB5Container` 的Flutter实现。您可以在 `FLUTTER BOOTSTRAP 5 示例网站` 上测试容器的调整大小行为。

支持以下容器类型：

FB5Container(child: child);
FB5Container.sm(child: child);
FB5Container.md(child: child);
FB5Container.lg(child: child);
FB5Container.xl(child: child);
FB5Container.xxl(child: child);
FB5Container.fluid(child: child);

FB5Row #

`FB5Row` 是 `FB5Row` 的Flutter实现。它们接受一个 `FB5Col` 列表，并根据类名进行排列和显示。

FB5Row(
  classNames: 'mt-5 px-xs-3 px-lg-0 gx-4',
  children: [
    FB5Col(
      classNames: 'col-12',
      child: const GettingStarted(),
    ),
    FB5Col(
      classNames: 'col-12 mt-5',
      child: const Containers(),
    ),
    FB5Col(
      classNames: 'mt-5',
      child: const TestingArea(),
    ),
    FB5Col(
      classNames: 'my-5',
      child: const GridArea(),
    ),
  ],
)

FB5Col #

`FB5Col` 是 `FB5Col` 的Flutter实现。它们应该在 `FB5Row` 中使用，并根据类名改变其表现形式。

FB5Col(
  classNames: 'col-12 col-lg-6 col-xl-4 m-3 m-xl-2 d-none d-sm-block',
  child: child,
),

FB5Grid #

`FB5Grid` 用于表示子项的网格系统。它们不应包含 `FB5Cols`。`FB5Grid` 自动调整子项的大小，使子项始终在同一行具有相同的高度。

FB5Grid(
  classNames: 'row-cols-3',
  children: [
    ...
  ],
)

辅助工具 #

BootstrapTheme #

`BootstrapTheme` 返回有关当前屏幕大小和断点的信息。为此，只需要执行以下函数：

final screenData = BootstrapTheme.of(context);

它还提供了一些有用的函数。例如，查询当前断点是否大于或小于某个断点。

final screenData = BootstrapTheme.of(context);
screenData.currentBreakPoint.isBreakPointOrSmaller(screenData.breakPoints.xl);

screenData.currentBreakPoint.isBreakPointOrLarger(screenData.breakPoints.xl);

函数 #

有一些辅助函数可以向Flutter小部件添加Bootstrap功能：

// 例如，在一个 `Container` 中添加一个4rem的上边距
Container(
  margin: margin(context, 'mt-4'),
);

// 例如，在一个 `Container` 中添加一个2rem的内边距
Container(
  margin: padding(context, 'p-2'),
);

// 在一个 `Container` 中添加圆角
Container(
  decoration: BoxDecoration(
    borderRadius: rounded(context), // rounded1 rounded2 rounded3 rounded4 rounded5 roundedPill
  ),
);

// 在一个 `Container` 中添加边框
Container(
  decoration: BoxDecoration(
    border: borderPrimary(context), // borderSecondary, borderSuccess, borderDanger, 等等...
  ),
);

// responsiveValue & responsiveValueOrNull
// 如果您需要在不同的断点下使用不同的值
final width = responsiveValue<double>(context, defaultValue: 300.0, md: 350.0, xl: 400.0);

示例代码

import 'package:flutter/material.dart';
import 'Auth/login.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          useMaterial3: false,
          scaffoldBackgroundColor: Colors.grey[300],
          colorScheme:
              ColorScheme.fromSwatch().copyWith(primary: Colors.deepPurple)),
      home: Login(),
    );
  }
}