Flutter 自定义数字组件插件 digit_flutter_components 的使用

安装

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

dependencies:
  digit_flutter_components: 1.0.0

然后运行以下命令以获取依赖：

flutter pub get

使用

在 Dart 代码中导入该包：

import 'package:digit_components/digit_components.dart';

示例

数字输入字段

DigitNumericFormInput 组件用于创建一个可配置的数字输入字段。以下是该组件的一个基本示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Digit Numeric Form Input Example')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              DigitNumericFormInput(
                label: "Numeric Field",
                controller: TextEditingController(),
                innerLabel: '内标签',
                helpText: '帮助文本',
                initialValue: '0',
                step: 1,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有验证功能的密码输入字段

DigitPasswordFormInput 组件用于创建一个带验证功能的密码输入字段。以下是该组件的一个基本示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Digit Password Form Input Example')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              DigitPasswordFormInput(
                label: "Password Field",
                controller: TextEditingController(),
                innerLabel: '内标签',
                helpText: '帮助文本',
                validations: [
                  Validator(ValidatorType.minLength, 6,
                      errorMessage: '密码必须至少包含6个字符。'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

单选按钮列表

DigitRadioList 组件用于创建一个单选按钮列表。以下是该组件的一个基本示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Digit Radio List Example')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              DigitRadioList(
                onChanged: (value) {},
                groupValue: '1',
                radioButtons: [
                  RadioButtonModel(code: '1', name: 'One'),
                  RadioButtonModel(code: '2', name: 'Two'),
                  RadioButtonModel(code: '3', name: 'Three'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

多选按钮列表

DigitToggleList 组件用于创建一个多选按钮列表。以下是该组件的一个基本示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Digit Toggle List Example')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              DigitToggleList(
                toggleButtons: [
                  ToggleButtonModel(name: 'Toggle 1', key: 'key1', onSelected: (value) {}),
                  ToggleButtonModel(name: 'Toggle 2', key: 'key2', onSelected: (value) {}),
                  ToggleButtonModel(name: 'Toggle 3', key: 'key3', onSelected: (value) {}),
                ],
                selectedIndex: 1,
                onChanged: (selectedValues) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}