Flutter通用组件插件`git_common_widgets`的使用

git_common_widgets 是一个用于简化在 Flutter 应用程序中添加可定制文本字段和按钮的包。通过该包，您可以轻松地将美观且可自定义的 UI 元素集成到您的应用中。

特性

可定制文本字段：轻松集成时尚且可自定义的文本输入字段到您的应用程序。
可定制按钮：创建具有多种样式和配置的吸引人按钮。

开始使用

1. 添加依赖

首先，在您的 pubspec.yaml 文件中添加 git_common_widgets 包：

dependencies:
  git_common_widgets: ^1.0.0

然后运行以下命令以安装依赖项：

flutter pub get

2. 导入包

在需要使用 git_common_widgets 的 Dart 文件中导入包：

import 'package:git_common_widgets/git_common_widgets.dart';

3. 使用示例

以下是一个完整的示例，展示如何使用 git_common_widgets 中的可定制文本字段和按钮。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('git_common_widgets 示例'),
        ),
        body: Center(
          child: ExampleWidget(),
        ),
      ),
    );
  }
}

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

class _ExampleWidgetState extends State<ExampleWidget> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 可定制文本字段
        GitTextField(
          controller: _controller,
          hintText: '请输入内容',
          prefixIcon: Icons.person,
          suffixIcon: Icons.clear,
          onChanged: (value) {
            print('输入内容: $value');
          },
        ),

        SizedBox(height: 20),

        // 可定制按钮
        GitButton(
          text: '提交',
          onPressed: () {
            if (_controller.text.isNotEmpty) {
              print('提交的内容: ${_controller.text}');
            } else {
              print('请输入内容');
            }
          },
          buttonColor: Colors.blue,
          textColor: Colors.white,
          borderRadius: 8,
        ),
      ],
    );
  }
}

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

htzhanglong 1楼•8 天前

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

git_common_widgets 是一个 Flutter 插件，旨在提供一组通用的、可重用的 UI 组件，以帮助开发者快速构建应用程序。这个插件通常包含一些常用的 UI 元素，如按钮、卡片、对话框、加载指示器等，这些组件可以大大减少开发时间，并保持应用程序的一致性。

安装

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

dependencies:
  flutter:
    sdk: flutter
  git_common_widgets: ^版本号

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

使用示例

以下是一些常见组件的使用示例：

1. 通用按钮

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Git Common Widgets Example'),
      ),
      body: Center(
        child: GitButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Pressed');
          },
        ),
      ),
    );
  }
}

2. 通用卡片

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Git Common Widgets Example'),
      ),
      body: Center(
        child: GitCard(
          child: Text('This is a card'),
        ),
      ),
    );
  }
}

3. 通用加载指示器

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Git Common Widgets Example'),
      ),
      body: Center(
        child: GitLoadingIndicator(),
      ),
    );
  }
}

4. 通用对话框

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Git Common Widgets Example'),
      ),
      body: Center(
        child: GitButton(
          text: 'Show Dialog',
          onPressed: () {
            GitDialog.show(
              context,
              title: 'Dialog Title',
              content: 'This is a dialog content',
              actions: [
                GitButton(
                  text: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

自定义和扩展

git_common_widgets 通常允许你通过传递参数来自定义组件的外观和行为。例如，你可以自定义按钮的颜色、大小、圆角等。

GitButton(
  text: 'Custom Button',
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  borderRadius: 20.0,
  onPressed: () {
    print('Custom Button Pressed');
  },
)