Flutter基础UI组件插件flutter_base_ui的使用

flutter_base_ui 是一个用于 Flutter 开发的 UI 组件库，旨在提供一些常用的基础 UI 组件，帮助开发者快速构建界面。虽然 flutter_base_ui 并不是 Flutter 官方提供的插件，但你可以通过自定义或使用第三方库来实现类似的功能。

以下是一些常见的基础 UI 组件及其用法，假设 flutter_base_ui 提供了这些功能：

1. 安装依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_base_ui: ^1.0.0  # 请使用最新版本

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

2. 使用基础 UI 组件

2.1 按钮（Button）

flutter_base_ui 可能提供了自定义的按钮组件，方便快速使用。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Base UI Demo'),
      ),
      body: Center(
        child: BaseButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Clicked');
          },
        ),
      ),
    );
  }
}

2.2 文本输入框（TextField）

flutter_base_ui 可能提供了自定义的文本输入框组件，带有一些默认样式或功能。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Base UI Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BaseTextField(
          hintText: 'Enter your name',
          onChanged: (value) {
            print('Text changed: $value');
          },
        ),
      ),
    );
  }
}

2.3 对话框（Dialog）

flutter_base_ui 可能提供了自定义的对话框组件，简化对话框的使用。

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

class MyHomePage extends StatelessWidget {
  void _showDialog(BuildContext context) {
    BaseDialog.show(
      context: context,
      title: 'Alert',
      content: 'This is a custom dialog from flutter_base_ui.',
      actions: [
        BaseDialogAction(
          text: 'OK',
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
    title: Text('Flutter Base UI Demo'),
      ),
      body: Center(
        child: BaseButton(
          text: 'Show Dialog',
          onPressed: () => _showDialog(context),
        ),
      ),
    );
  }
}

2.4 加载指示器（Loading Indicator）

flutter_base_ui 可能提供了自定义的加载指示器组件，方便在加载数据时显示。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Base UI Demo'),
      ),
      body: Center(
        child: BaseLoadingIndicator(),
      ),
    );
  }
}

3. 自定义样式

flutter_base_ui 可能允许你通过主题或参数来自定义组件的样式。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Base UI Demo'),
      ),
      body: Center(
        child: BaseButton(
          text: 'Custom Button',
          onPressed: () {
            print('Custom Button Clicked');
          },
          style: BaseButtonStyle(
            backgroundColor: Colors.blue,
            textColor: Colors.white,
            borderRadius: 8.0,
          ),
        ),
      ),
    );
  }
}