Flutter UI框架集成插件flutter_bootstrap5的使用

简介

FlutterBootstrap5 是一个用于支持使用 Flutter 创建响应式 Web 应用程序的插件。它基于知名的 CSS 框架 Bootstrap 5，并提供了许多在 Bootstrap 中可以找到的功能。

如果您喜欢这个插件，希望您可以给它一个赞 ❤️ 和一个星 ⭐ 来支持该项目！

如果您想快速了解最重要的功能并直接进行测试，可以访问以下网站：

FLUTTER BOOTSTRAP 5 示例网站

小示例

开始使用

配置 Flutter Bootstrap5

要在您的应用程序中使用 FlutterBootstrap5，只需将您的 MaterialApp 包裹在一个 FlutterBootstrap5 组件中即可。

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

设置主题

您可以自定义 FlutterBootstrap5 以满足您的需求。您可以保持默认值以获得默认的 Bootstrap 5 应用程序行为。

断点（BreakPoints）

要设置自己的断点，可以直接传递 BreakPoints 类到 FlutterBootstrap5 组件。默认情况下，它会使用当前 Bootstrap 5 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 在特定断点下的宽度。

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 中也会根据默认字体大小来计算这些值。

默认值为 16.0。

字体排版（Typography）

Flutter Bootstrap5 使用基于 Bootstrap CSS 的字体大小计算机制。因此，字体大小会根据屏幕尺寸动态变化。可以通过传递 FB5Typography 类来自定义此行为。

在 MaterialApp 中使用主题

配置好 FlutterBootstrap5 后，可以将其主题传递给 MaterialApp 以充分利用 Flutter Bootstrap 5。

MaterialApp(
    title: 'Flutter Bootstrap5 Demo',
    theme: BootstrapTheme.of(ctx).toTheme(
        theme: ThemeData(
            scaffoldBackgroundColor: BootstrapTheme.of(ctx).colors.white,
            appBarTheme: AppBarTheme(
                backgroundColor: BootstrapTheme.of(ctx).colors.primary,
                foregroundColor: BootstrapTheme.of(ctx).colors.white,
                elevation: 0.0,
            ),
            fontFamily: GoogleFonts.roboto().fontFamily,
        ),
    ),
    home: const Home(),
),

功能介绍

目前支持的 Bootstrap 类

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

组件

FB5Container

FB5Container 是 Bootstrap Container 的 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 是 Bootstrap 行的 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 是 Bootstrap 列的 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:example/cubits/app_cubit.dart';
import 'package:example/cubits/app_state.dart';
import 'package:example/profil.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bootstrap5/flutter_bootstrap5.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  late final AppCubit appCubit;

  [@override](/user/override)
  void initState() {
    appCubit = AppCubit();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    appCubit.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider<AppCubit>.value(
      value: appCubit,
      child: BlocBuilder<AppCubit, AppState>(
        bloc: appCubit,
        builder: (context, state) {
          return FlutterBootstrap5(
            fontSize: state.defaultFontSize,
            builder: (ctx) => MaterialApp(
              title: 'Flutter Bootstrap5 Demo',
              theme: BootstrapTheme.of(ctx).toTheme(
                theme: ThemeData(
                  scaffoldBackgroundColor: BootstrapTheme.of(ctx).colors.white,
                  appBarTheme: AppBarTheme(
                    backgroundColor: BootstrapTheme.of(ctx).colors.primary,
                    foregroundColor: BootstrapTheme.of(ctx).colors.white,
                    elevation: 0.0,
                  ),
                  fontFamily: GoogleFonts.roboto().fontFamily,
                ),
              ),
              home: const Profile(),
            ),
          );
        },
      ),
    );
  }
}