sc_flutter_component_library 0.0.1

A Flutter component library with rich text input widgets supporting multiple input types and automatic format validation.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SC Flutter Component Library Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const ComponentDemoPage(),
    );
  }
}

class ComponentDemoPage extends StatefulWidget {
  const ComponentDemoPage({super.key});

  @override
  State<ComponentDemoPage> createState() => _ComponentDemoPageState();
}

class _ComponentDemoPageState extends State<ComponentDemoPage> {
  // 各种输入框的控制器
  final TextEditingController _textController = TextEditingController();
  final TextEditingController _weightController = TextEditingController();
  final TextEditingController _priceController = TextEditingController();
  final TextEditingController _amountController = TextEditingController();
  final TextEditingController _quantityController = TextEditingController();
  final TextEditingController _clearableController = TextEditingController();

  // 焦点节点
  final FocusNode _textFocus = FocusNode();
  final FocusNode _weightFocus = FocusNode();
  final FocusNode _priceFocus = FocusNode();
  final FocusNode _amountFocus = FocusNode();
  final FocusNode _quantityFocus = FocusNode();

  // 状态变量
  String _lastChangedValue = '';
  String _lastSubmittedValue = '';
  bool _isEnabled = true;

  @override
  void dispose() {
    // 清理资源
    _textController.dispose();
    _weightController.dispose();
    _priceController.dispose();
    _amountController.dispose();
    _quantityController.dispose();
    _clearableController.dispose();
    _textFocus.dispose();
    _weightFocus.dispose();
    _priceFocus.dispose();
    _amountFocus.dispose();
    _quantityFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SC Flutter Component Library Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 标题
            Text(
              'TextFieldWidget 组件演示',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 16),

            // 状态显示区域
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '状态监控',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    const SizedBox(height: 8),
                    Text('最后变化的值: $_lastChangedValue'),
                    Text('最后提交的值: $_lastSubmittedValue'),
                    const SizedBox(height: 8),
                    Row(
                      children: [
                        const Text('启用状态: '),
                        Switch(
                          value: _isEnabled,
                          onChanged: (value) {
                            setState(() {
                              _isEnabled = value;
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 24),

            // 基础文本输入框
            _buildSection(
              title: '1. 基础文本输入框',
              description: '支持普通文本输入，包含前缀图标',
              child: TextFieldWidget(
                labelText: '用户名',
                hintText: '请输入用户名',
                controller: _textController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.text,
                prefixIcon: const Icon(Icons.person),
                focusNode: _textFocus,
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '文本: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '文本: $value';
                  });
                },
              ),
            ),

            // 重量输入框
            _buildSection(
              title: '2. 重量输入框',
              description: '限制小数点后3位，只允许数字和小数点',
              child: TextFieldWidget(
                labelText: '重量 (kg)',
                hintText: '请输入重量',
                controller: _weightController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.weight,
                prefixIcon: const Icon(Icons.fitness_center),
                focusNode: _weightFocus,
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '重量: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '重量: $value';
                  });
                },
              ),
            ),

            // 单价输入框
            _buildSection(
              title: '3. 单价输入框',
              description: '限制小数点后4位，适用于精确单价',
              child: TextFieldWidget(
                labelText: '单价 (¥)',
                hintText: '请输入单价',
                controller: _priceController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.price,
                prefixIcon: const Icon(Icons.attach_money),
                focusNode: _priceFocus,
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '单价: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '单价: $value';
                  });
                },
              ),
            ),

            // 金额输入框
            _buildSection(
              title: '4. 金额输入框',
              description: '限制小数点后2位，适用于货币金额',
              child: TextFieldWidget(
                labelText: '金额 (¥)',
                hintText: '请输入金额',
                controller: _amountController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.amount,
                prefixIcon: const Icon(Icons.account_balance_wallet),
                focusNode: _amountFocus,
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '金额: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '金额: $value';
                  });
                },
              ),
            ),

            // 数量输入框
            _buildSection(
              title: '5. 数量输入框',
              description: '只允许输入整数，适用于件数统计',
              child: TextFieldWidget(
                labelText: '数量 (件)',
                hintText: '请输入数量',
                controller: _quantityController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.quantity,
                prefixIcon: const Icon(Icons.inventory),
                focusNode: _quantityFocus,
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '数量: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '数量: $value';
                  });
                },
              ),
            ),

            // 带清除按钮的输入框
            _buildSection(
              title: '6. 带清除按钮的输入框',
              description: '包含清除按钮，方便快速清空内容',
              child: QuickFilterTextFieldWithClearWidget(
                labelText: '搜索内容',
                hintText: '请输入搜索关键词',
                controller: _clearableController,
                enabled: _isEnabled,
                inputType: TextFieldInputType.text,
                prefixIcon: const Icon(Icons.search),
                width: 300,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '搜索: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '搜索: $value';
                  });
                },
                onClear: () {
                  setState(() {
                    _lastChangedValue = '搜索: 已清除';
                  });
                },
              ),
            ),

            // 多行文本输入框
            _buildSection(
              title: '7. 多行文本输入框',
              description: '支持多行文本输入，适用于备注或描述',
              child: TextFieldWidget(
                labelText: '备注',
                hintText: '请输入备注信息',
                enabled: _isEnabled,
                inputType: TextFieldInputType.text,
                maxLines: 3,
                width: 300,
                height: 80,
                onChanged: (value) {
                  setState(() {
                    _lastChangedValue = '备注: $value';
                  });
                },
                onSubmitted: (value) {
                  setState(() {
                    _lastSubmittedValue = '备注: $value';
                  });
                },
              ),
            ),

            // 操作按钮区域
            const SizedBox(height: 24),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '操作演示',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    const SizedBox(height: 16),
                    Wrap(
                      spacing: 8,
                      runSpacing: 8,
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            _textController.text = 'demo_user';
                            _weightController.text = '12.345';
                            _priceController.text = '99.9999';
                            _amountController.text = '123.45';
                            _quantityController.text = '10';
                            _clearableController.text = '示例搜索';
                          },
                          child: const Text('填充示例数据'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            _textController.clear();
                            _weightController.clear();
                            _priceController.clear();
                            _amountController.clear();
                            _quantityController.clear();
                            _clearableController.clear();
                            setState(() {
                              _lastChangedValue = '';
                              _lastSubmittedValue = '';
                            });
                          },
                          child: const Text('清空所有'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            showDialog(
                              context: context,
                              builder: (context) => AlertDialog(
                                title: const Text('当前值'),
                                content: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text('文本: ${_textController.text}'),
                                    Text('重量: ${_weightController.text}'),
                                    Text('单价: ${_priceController.text}'),
                                    Text('金额: ${_amountController.text}'),
                                    Text('数量: ${_quantityController.text}'),
                                    Text('搜索: ${_clearableController.text}'),
                                  ],
                                ),
                                actions: [
                                  TextButton(
                                    onPressed: () => Navigator.pop(context),
                                    child: const Text('确定'),
                                  ),
                                ],
                              ),
                            );
                          },
                          child: const Text('显示当前值'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),
            // 使用说明
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '使用说明',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    const SizedBox(height: 8),
                    const Text('• TextFieldWidget: 基础输入框组件，支持多种输入类型'),
                    const Text('• QuickFilterTextFieldWithClearWidget: 带清除按钮的输入框'),
                    const Text('• 支持的输入类型: text, weight, price, amount, quantity'),
                    const Text('• 自动格式验证和输入限制'),
                    const Text('• 支持焦点管理和回调事件'),
                    const Text('• 可自定义样式和尺寸'),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required String description,
    required Widget child,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: Theme.of(context).textTheme.titleMedium?.copyWith(
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          description,
          style: Theme.of(context).textTheme.bodySmall?.copyWith(
            color: Colors.grey[600],
          ),
        ),
        const SizedBox(height: 8),
        child,
        const SizedBox(height: 24),
      ],
    );
  }
}