Flutter自定义组件库插件 basf_flutter_components 的使用

介绍

basf_flutter_components 是一个由BASF-Mobile-Solutions开发的Flutter组件库，它提供了丰富的UI组件、主题、动画和扩展功能。本文将详细介绍如何在你的Flutter项目中使用这个库。

Logo

相关链接

• GitHub Actions
• Pub Package
• Very Good Analysis
• License
• Coverage Badge

安装

首先，在你的 pubspec.yaml 文件中添加 basf_flutter_components 依赖：

dependencies:
  basf_flutter_components: ^latest_version

然后，在 .dart 文件中导入该库：

import 'package:basf_flutter_components/basf_flutter_components.dart';

使用示例

以下是一个简单的示例应用，展示了如何集成并使用 basf_flutter_components 库中的组件。

// example/lib/main.dart
import 'package:basf_flutter_components/basf_flutter_components.dart';
import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BASF Components',
      theme: BasfThemes.lightMainTheme(),
      home: const OverviewScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Overview')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 示例：BasfTextButton
            BasfTextButton.contained(
              text: 'Styled Button',
              onPressed: () {
                AppSnackBar.info(message: 'Button pressed').show(context);
              },
            ),
            const SizedBox(height: 20),
            // 示例：BasfTextField
            BasfTextField(
              decoration: const InputDecoration(hintText: 'Enabled'),
              controller: TextEditingController(),
            ),
            const SizedBox(height: 20),
            // 示例：BasfOutlinedButton
            BasfOutlinedButton(
              text: 'Outlined Buttons',
              onPressed: () {},
            ),
            const SizedBox(height: 20),
            // 示例：SliderButton
            SliderButton(
              text: 'Basf Slider button',
              onConfirmation: () {},
            ),
          ],
        ),
      ),
    );
  }
}

组件概览

主题 (Theme)

Themes

theme: BasfThemes.lightMainTheme(BasfThemeType.darkBlue),

Colors

BasfColors.red,

Fonts

Theme.of(context).textTheme.headline1!,

小部件 (Widgets)

AppSnackBar

AppSnackBar.info(message: 'Button pressed').show(context);

BasfTextButton

BasfTextButton.contained(
  text: 'Styled Button',
  onPressed: () => _onPressed(context),
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
    backgroundColor: BasfColors.red,
  ),
),

OutlinedButton

BasfOutlinedButton(
  text: 'Outlined Buttons',
  onPressed: () { /* --- */ },
),

SliderButton

SliderButton(
  text: 'Basf Slider button',
  onConfirmation: () {},
),

Dialogs

showDialog<void>(
  context: context,
  builder: (context) {
    return const BasfAlertDialog(
      title: 'Title',
      description: 'Body Text',
      confirmText: 'Confirm Text',
      dismissText: 'Dismiss Text',
    );
  },
);

TextFields

BasfTextField(
  decoration: const InputDecoration(hintText: 'Enabled'),
  controller: _enabledController,
),

Dropdown

BasfDropDownInput(
  controller: TextEditingController(),
  values: const ['Option1', 'Option2', 'Option3'],
),

Radio

RadioOptions(
  title: 'BASF Radio',
  selectedValue: selectedValue,
  labelGenerator: (o) => '$o',
  values: values,
  onSelected: (value) {
    setState(() => selectedValue = value.toString());
  },
),

CheckBox

BasfCheckbox(
  value: selected,
  onChanged: change,
),

Icons

Icon(BasfIcons.add),

动画 (Animations)

Fade

Fade(
  visible: value,
  child: Text('Sup'),
),

扩展 (Extensions)

ThemeData on BuildContext

final theme = context.theme;

Joined Widgets

[
  const Text('CARLOS'),
  const Text('MOBILE SOLUTIONS'),
].joinWithSeparator();

Spaced Widgets

[
  const Text('CARLOS'),
  const Text('MOBILE SOLUTIONS'),
].spaced();

Log on Object

final testString = 'My String';
testString.log();

Detailed Where on Map<K, V>

<Map<String, int>>{'John': 20, 'Mary': 21, 'Peter': 20}
  ..where((key, value) => key.length > 4 && value >= 20)
  ..whereKey((key) => key.length < 5)
  ..whereValue((value) => value.isEven);

Capitalization on String

'carlos g'.toCapitalized(); // Carlos g
'carlos g'.toTitleCase(); // Carlos G

以上就是关于 basf_flutter_components 插件的基本介绍和使用方法。你可以根据需要选择合适的组件和功能来丰富你的Flutter应用。更多详细信息请参考官方文档或示例项目。