Flutter UI组件库插件gbt_fluent2_ui的使用

Flutter UI组件库插件gbt_fluent2_ui的使用

安装

首先，在你的 pubspec.yaml 文件中添加依赖，并运行 dart pub get 来下载该包。

dependencies:
  gbt_fluent2_ui:

在需要使用该组件的文件中导入：

import 'package:gbt_fluent2_ui/gbt_fluent2_ui.dart';

特性

  • 基于Fluent2的主题
  • 提供有用的组件（包括行为）
  • 几乎没有依赖，除了Flutter

入门指南

首先，让我们将我们的 MaterialApp 包裹在 FluentProvider 中：

FluentProvider(
  child: MaterialApp(
    home: YourHomeScreen(), // 替换为你的首页
  ),
);

确保始终使用 FluentScaffold 而不是 Scaffold：

FluentScaffold(
  appBar: FluentNavBar(...),
  body: Placeholder(),
);

导入轻量和深色主题到你的项目中：

import 'package:gbt_fluent2_ui/theme_data.dart' as theme_data;

final theme = theme_data.theme;
final darkTheme = theme_data.darkTheme;

或者你可以传递自己的品牌颜色：

import 'package:gbt_fluent2_ui/theme_data.dart';

const _brandColor = MaterialColor(
  0xFF7f22e2,
  <int, Color>{
    50: Color(0xFFf5e6ff),
    100: Color(0xFFd9bafa),
    200: Color(0xFFbf8df2),
    300: Color(0xFFa461eb),
    400: Color(0xFF8934e4),
    500: Color(0xFF701bcb),
    600: Color(0xFF57149f),
    700: Color(0xFF3e0e73),
    800: Color(0xFF250747),
  },
);

ThemeData get theme =>
    getTheme(brandColor: _brandColor, brightness: Brightness.light,);

ThemeData get darkTheme =>
    getTheme(brandColor: _brandColor, brightness: Brightness.dark);

然后将主题添加到你的 MaterialApp 中：

FluentProvider(
  child: MaterialApp(
    themeAnimationDuration: Duration.zero,
    darkTheme: darkTheme,
    themeMode: ThemeMode.system, // 或者选择其他模式
  ),
);

Fluent图标

导入 FluentIcons：

import 'package:gbt_fluent2_ui/fluent_icons.dart';

设计令牌

设计令牌用于分配 Fluent 风格，如颜色、排版、间距或阴影，而无需硬编码像素和十六进制代码。

圆角半径

使用 FluentCornerRadius 来改变元素的圆角半径：

FluentContainer(
  cornerRadius: FluentCornerRadius.large,
)
间距阶梯

在每个组件和布局中使用，以创建熟悉的、统一的产品体验：

FluentContainer(
  padding: EdgeInsets.symmetric(horizontal: FluentSize.size160.value),
)
排版

使用 FluentText 组件，接受 Fluent 排版令牌：

FluentText(
  "Text 1",
  style: FluentThemeDataModel.of(context)
      .fluentTextTheme
      ?.body2,
),
FluentText(
  "Text 2",
  style: FluentThemeDataModel.of(context)
      .fluentTextTheme
      ?.caption1,
),

如果需要修改文本样式，可以使用 fluentCopyWith()：

FluentText(
  "Text",
  style: FluentThemeDataModel.of(context)
      .fluentTextTheme
      ?.body2?.fluentCopyWith(
    fluentColor: Colors.pink
  ),
)
阴影

Fluent 提供了六组阴影，每组包含两层：

FluentContainer(
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.shadow2,
  width: 100,
  height: 100,
),
FluentContainer(
  color: FluentColors.of(context)?.brandBackground1Rest,
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.brandShadow64,
  width: 100,
  height: 100,
)
描边

FluentContainer 具有 strokeStyle 属性，可以传递描边样式：

FluentStrokeDivider(
  style: FluentStrokeStyle(color: Colors.blue, thickness: FluentStrokeThickness.strokeWidth20),
  startIndent: FluentStrokeBorderIndent.strokeIndent16,
)
颜色令牌

使用 FluentColors 和 FluentDarkColors 类：

color: FluentColors.of(context)?.brandForeground1Selected

组件

Fluent Avatar

标准类型：

FluentAvatar(
  child: Image.asset(
    "assets/images/avatars/avatar1.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
),

组类型：

FluentAvatar(
  isGroup: true,
  ...
)
Fluent Button

大小：

FluentButton(
  title: "Click Me",
  size: FluentButtonSize.medium,
  onPressed: () {},
)

变体：

FluentButton(
  title: "Click Me",
  variant: FluentButtonVariant.accent,
  onPressed: () {},
)
Fluent Navigation Bar

品牌或中性变体：

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
)

前导图标：

FluentNavBar(
  leading: Icon(FluentIcons.leaf_two_32_filled),
)

渐变：

FluentNavBar(
  title: NavCenterTitle(title: "Title"),
  themeColorVariation: FluentThemeColorVariation.brand,
  gradient: LinearGradient(
    colors: [
      Colors.purple,
      Colors.deepPurple,
    ],
  ),
)

导航标题：

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
  title: NavLeftSubtitle(title: "Title", subtitle: "My subtitle",),
)

导航动作：

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
  title: NavLeftSubtitle(title: "Title", subtitle: "My subtitle",),
  actions: [
    Icon(FluentIcons.airplane_24_regular),
    Icon(FluentIcons.access_time_20_regular),
    Icon(FluentIcons.sparkle_20_filled),
  ],
)
Fluent List

单行列表：

FluentList.oneLine(
  listItems: [
    FluentListItemOneLine(text: "Item 1"),
    FluentListItemOneLine(text: "Item 2"),
  ],
)

多行列表：

FluentList.multiLine(
  listItems: [
    FluentListItemMultiLine(text: "Item 1"),
    FluentListItemMultiLine(text: "Item 2"),
  ],
)

列表属性：

FluentList.multiLine(
  sectionHeaderTitle: "I'm header title",
  sectionHeaderTitleVariant: SectionHeaderTitleVariant.bold,
  sectionHeaderActions: FluentSectionHeaderActions(
    action1: Icon(FluentIcons.circle_20_regular),
    action2: Icon(FluentIcons.circle_20_regular),
  ),
  sectionDescriptionText: "This is my list description",
  separator: FluentStrokeDivider(),
  sectionDescriptionIcon: FluentIcons.leaf_three_16_filled,
  listItems: [
    FluentListItemMultiLine(text: "Item 1"),
    FluentListItemMultiLine(text: "Item 2"),
  ],
)
Fluent Card
FluentCard(
  text: "Text",
  subText: "Subtext",
  leading: Image.asset(
    "assets/images/cards/card2.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
  coverImage: Image.asset(
    "assets/images/cards/card2.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
  onPressed: () {
    //   put your onPressed function here
  },
)

使用 FluentCardContainer：

FluentCardContainer(
  padding: EdgeInsets.all(FluentSize.size160.value),
  child: Text("Hi, i'm a text"),
)
Fluent Radio Button
FluentRadioButton&lt;Option&gt;(
  value: Option.option1,
  groupValue: _option,
  onChanged: (value) {
  //   put your onChanged function here
  },
)

禁用状态：

FluentRadioButton&lt;Option&gt;(
  value: Option.option1,
  groupValue: _option,
  onChanged: null,
)
Fluent Checkbox
FluentCheckbox(
  value: isCheckbox1,
  onChanged: (value) {
    // put your onChanged function here
  },
)

禁用状态：

FluentCheckbox(
  value: isCheckbox1,
  onChanged: null,
)
Fluent Switch Toggle
FluentSwitchToggle(
  value: showIcons,
  onChanged: (value) => setState(() {
    showIcons = value;
  }),
)

禁用状态：

FluentSwitchToggle(
  value: showIcons,
  onChanged: null,
)
Fluent Banner
final myBanner = FluentBanner(
  bannerColor: FluentBannerColor.accent,
  text: "It's me Mario",
);

添加Banner：

FluentButton(
  title: "Open Banner",
  onPressed: () async {
    FluentScaffoldMessenger.of(context).addBanner(myBanner);
  },
)

移除Banner：

FluentButton(
  title: "Fechar Banner",
  onPressed: () async {
    FluentScaffoldMessenger.of(context).removeBanner(myBanner);
  },
)
Fluent Toast

四种不同的颜色变体：

FluentButton(
  title: "Accent Toast",
  onPressed: (){
    FluentToast(
      toastColor: FluentToastColor.accent,
      text: "Fluent 2 is here",
      subText: "See what’s changed.",
      icon: Icon(FluentIcons.sparkle_20_filled),
      action: Builder(
        builder: (context) => IconButton(
          onPressed: () {
            FluentToastOverlayEntry.of(context).remove();
          },
          icon: Icon(Icons.cancel),
        ),
      ),
    ).show(
      context: context,
      duration: null,
      onDismissed: () {
        print("Fechou!");
      },
    );
  },
)
Fluent Text Field
FluentTextField(
  label: "Last Name",
  hintText: "Ballinger",
  onChanged: (value) {
  //   put your onChanged function here
  },
  obscureText: false,
  readOnly: false,
  suffixIcon: Icon(FluentIcons.leaf_three_16_filled),
  hasError: error != null,
  assistiveText: error ?? "assistive",
)
Fluent Progress Bar
if (isUpdating)
  FluentProgressBar(
    value: null,
  )
Fluent Heads-up Display
FluentButton(
  title: "Open HUD",
  onPressed: () {
    FluentHeadsUpDisplayDialog(
      future: Future.delayed(Duration(seconds: 1)),
      confirmStopMessage: "Are you sure you want to close this?",
      hud: FluentHeadsUpDisplay(
        text: "Refreshing Data...",
      ),
    ).show(context);
  },
)

示例代码

以下是示例代码：

import 'package:example/my_app.dart';
import 'package:example/screens/home/home_view.dart';
import 'package:example/splash_screen.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  debugPrint('main()');
  debugPrint('begin initialization');

  debugPrint('runing app (splash)');
  runApp(MyApp(home: SplashScreenView()));

  await Future.delayed(Duration(seconds: 3));

  debugPrint('runing app (home)');
  runApp(MyApp(home: HomeView()));
}

更多关于Flutter UI组件库插件gbt_fluent2_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件库插件gbt_fluent2_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter UI组件库插件gbt_fluent2_ui的示例代码案例。这个库是基于Microsoft Fluent Design System的Flutter实现，提供了一系列现代化的UI组件。

首先，确保你已经在pubspec.yaml文件中添加了gbt_fluent2_ui依赖：

dependencies:
  flutter:
    sdk: flutter
  gbt_fluent2_ui: ^最新版本号  # 替换为实际最新版本号

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

接下来是一个简单的示例，展示如何使用gbt_fluent2_ui中的一些组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FluentApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FluentAppBar(
        title: Text('Fluent2 UI Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            FluentTextField(
              labelText: 'Email',
              hintText: 'Enter your email',
            ),
            SizedBox(height: 16),
            FluentTextField(
              labelText: 'Password',
              hintText: 'Enter your password',
              obscureText: true,
            ),
            SizedBox(height: 24),
            FluentButton(
              text: 'Sign In',
              onPressed: () {
                // Handle sign in logic here
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Sign In button pressed')),
                );
              },
            ),
            SizedBox(height: 24),
            FluentCheckbox(
              value: false,
              onChange: (newValue) {
                // Handle checkbox change here
                print('Checkbox value: $newValue');
              },
              label: Text('Stay signed in'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. FluentApp: 这是gbt_fluent2_ui提供的顶层应用组件，类似于MaterialApp。
  2. FluentAppBar: Fluent风格的AppBar。
  3. FluentTextField: Fluent风格的文本输入框。
  4. FluentButton: Fluent风格的按钮。
  5. FluentCheckbox: Fluent风格的复选框。

在这个示例中，我们创建了一个简单的登录界面，包括两个文本输入框（一个用于电子邮件，一个用于密码），一个登录按钮，以及一个复选框。

你可以根据需要进一步自定义和扩展这个示例，使用gbt_fluent2_ui库提供的更多组件和特性。更多详细信息和组件使用示例，请参考gbt_fluent2_ui的官方文档或GitHub仓库。

回到顶部