Flutter UI组件库插件bruno的使用

Flutter UI组件库插件bruno的使用

1. 整理后的内容中关于“Flutter UI组件库插件bruno的使用”的完整示例demo

Bruno 是一套企业级移动端 Flutter 组件库，开箱即用的高质量 Flutter 组件。

特性：

  • 提炼自企业级移动端产品的交互和视觉风格
  • 开箱即用的高质量 Flutter 组件
  • 提供满足业务差异的主题定制能力
  • 设计工具赋能开发全链路

接入方式： 在 Flutter 工程中的 pubspec.yaml 文件里加入以下依赖：

dependencies:
  bruno: version

示例代码：

import 'package:bruno/bruno.dart';
import 'sample/l10n/l10n.dart';
import 'package:example/sample/home/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  BrnIntl.add(ResourceDe.locale, ResourceDe());
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NotificationListener<ChangeLocalEvent>(
      onNotification: (_) {
        setState(() {});
        return true;
      },
      child: MaterialApp(
        locale: ChangeLocalEvent.locale,
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          BrnLocalizationDelegate.delegate,
        ],
        supportedLocales: [
          Locale('en', 'US'),
          Locale('zh', 'CN'),
          Locale('de', 'DE'),
        ],
        title: 'Flutter Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

主题定制： 参考 主题定制文档

参与贡献： 贡献之前请先阅读 贡献指南。

感谢所有为 Bruno 做出贡献的开发者！

社区群： 欢迎加入我们的社区群，交流反馈建议。 社区群二维码 社区群二维码

链接：

致谢： Bruno 参考和引用部分开源库如下：

  • flutter_gifimage
  • expansion_tile_card.dart
  • photo_view
  • flutter_intro
  • flutter_badges
  • lpinyin
  • azlistview
  • flutter_path_drawing

感谢以上开源库的作者。

示例代码：

import 'package:bruno/bruno.dart';
import 'sample/l10n/l10n.dart';
import 'package:example/sample/home/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  BrnIntl.add(ResourceDe.locale, ResourceDe());
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NotificationListener<ChangeLocalEvent>(
      onNotification: (_) {
        setState(() {});
        return true;
      },
      child: MaterialApp(
        locale: ChangeLocalEvent.locale,
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          BrnLocalizationDelegate.delegate,
        ],
        supportedLocales: [
          Locale('en', 'US'),
          Locale('zh', 'CN'),
          Locale('de', 'DE'),
        ],
        title: 'Flutter Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

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

1 回复

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


当然，Flutter UI组件库插件Bruno提供了丰富的UI组件，可以极大地加速开发过程。以下是如何在Flutter项目中使用Bruno插件的一些代码示例。

首先，你需要在pubspec.yaml文件中添加Bruno依赖：

dependencies:
  flutter:
    sdk: flutter
  bruno: ^最新版本号  # 请替换为最新的版本号

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

示例1：使用BrnButton组件

BrnButton是Bruno提供的一个按钮组件，支持多种样式。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bruno Button Example'),
        ),
        body: Center(
          child: BrnButton(
            type: BrnButtonType.primary,
            child: Text('Primary Button'),
            onPressed: () {
              print('Primary Button Pressed');
            },
          ),
        ),
      ),
    );
  }
}

示例2：使用BrnPicker组件

BrnPicker是一个选择器组件，可以用于日期、时间或其他选项的选择。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bruno Picker Example'),
        ),
        body: Center(
          child: BrnPicker(
            data: ['Option 1', 'Option 2', 'Option 3'],
            title: 'Please Select',
            onConfirm: (String result) {
              print('Selected: $result');
            },
          ),
        ),
      ),
    );
  }
}

示例3：使用BrnLoading组件

BrnLoading是一个加载指示器组件，用于显示加载状态。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bruno Loading Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    isLoading = !isLoading;
                  });
                  Future.delayed(Duration(seconds: 2), () {
                    setState(() {
                      isLoading = !isLoading;
                    });
                  });
                },
                child: Text('Show/Hide Loading'),
              ),
              if (isLoading) BrnLoading()
            ],
          ),
        ),
      ),
    );
  }
}

示例4：使用BrnSearchBar组件

BrnSearchBar是一个搜索栏组件，支持搜索功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bruno SearchBar Example'),
        ),
        body: BrnSearchBar(
          placeholder: 'Search...',
          onSearch: (String query) {
            print('Search Query: $query');
          },
        ),
      ),
    );
  }
}

这些示例展示了如何在Flutter项目中集成和使用Bruno插件的不同组件。你可以根据需要进一步定制这些组件，以满足你的应用需求。

回到顶部