Flutter数字格式化插件pretty_numbers的使用

Pretty Numbers 是一个用于美化 Flutter 应用中数字输入字段的插件。通过它，你可以使用户更容易阅读并吸引他们的眼球。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  pretty_numbers: ^0.0.1

然后运行 flutter pub get 来获取这个包。

简单示例

下面是一个简单的示例，展示如何使用 Pretty Numbers 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pretty Numbers Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ExampleForm(),
        ),
      ),
    );
  }
}

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

class _ExampleFormState extends State<ExampleForm> {
  final _controller = TextEditingController();
  final _focusNode = FocusNode();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        PrettyNumbers(
          controller: _controller,
          focusNode: _focusNode,
          hintText: 'Enter amount',
          suffixIcon: Icon(Icons.check_circle),
          prefixIcon: Icon(Icons.attach_money),
        ),
      ],
    );
  }
}

另一个令人兴奋的示例

下面是一个更复杂的示例，展示如何在一个表单中使用 Pretty Numbers 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ComplexExampleScreen(),
    );
  }
}

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

class _ComplexExampleScreenState extends State<ComplexExampleScreen> {
  final _numberController = TextEditingController();
  final _otherFieldController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  void dispose() {
    _numberController.dispose();
    _otherFieldController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Exciting Pretty Numbers Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              PrettyNumbers(
                controller: _numberController,
                hintText: 'Enter a number',
                prefixIcon: Icon(Icons.attach_money),
                suffixIcon: Icon(Icons.check),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.green, width: 2.0),
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.red, width: 2.0),
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey, width: 1.0),
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                hintStyle: TextStyle(color: Colors.grey, fontSize: 16),
              ),
              SizedBox(height: 20),
              TextFormField(
                controller: _otherFieldController,
                decoration: InputDecoration(
                  labelText: 'Another Field',
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // Process data.
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多属性

Pretty Numbers 还支持更多的自定义属性。例如，你可以在文本框中设置样式、填充颜色和其他装饰属性。下面是一个带有更多属性的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pretty Numbers Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ExampleForm(),
        ),
      ),
    );
  }
}

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

class _ExampleFormState extends State<ExampleForm> {
  final _controller = TextEditingController();
  final _focusNode = FocusNode();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          // Simple example
          PrettyNumbers(
            controller: _controller,
            focusNode: _focusNode,
            hintText: 'Enter amount',
            suffixIcon: const Icon(Icons.check_circle),
            prefixIcon: const Icon(Icons.attach_money),
          ),
          // Example with custom properties
          PrettyNumbers(
            controller: _controller,
            focusNode: _focusNode,
            hintText: 'Enter amount',
            suffixIcon: Icon(Icons.check_circle),
            prefixIcon: Icon(Icons.attach_money),
            style: TextStyle(color: Colors.blue, fontSize: 18),
            hintStyle: TextStyle(color: Colors.grey, fontSize: 16),
            filled: true,
            decoration: InputDecoration(
              fillColor: Colors.lightBlue[50],
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue, width: 2.0),
                borderRadius: BorderRadius.circular(10),
              ),
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 2.0),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(color: Colors.black, width: 1.0),
              ),
            ),
          ),
        ],
      ),
    ));
  }
}