Flutter数字增减控制插件field_inc_dec_support的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter数字增减控制插件field_inc_dec_support的使用

使用插件"field_inc_dec_support",你将能够加快你的开发进度,尤其是在添加数量框等功能时。

一些有用的见解

License: MIT Pub Twitter

技术栈

该插件完全由以下技术创建:

  • Dart

预览

安装与使用

在项目的终端中,输入以下命令以安装合适的版本,或者手动安装。

flutter pub add field_inc_dec_support

import 'package:field_inc_dec_support/field_inc_dec_support.dart';

代码片段

FieldIncDecSupport(
    elevation: 2,
    backColor: Theme.of(context).primaryColor,
    value: 0,
    maxLimit: 99,
),

可选参数

  • leftIcon
  • rightIcon
  • borderRadius (double)
  • valColor
# 这里是更新后的代码片段视图

FieldIncDecSupport(
    elevation: 2,
    backColor: Colors.orange,
    value: 0,
    maxLimit: 99,
    borderRadius: 12,
    leftIcon: const Icon(Icons.abc_outlined),
    rightIcon: const Icon(Icons.abc_outlined),
    valColor: const Color(0xffffffff),
)

平台支持

field_inc_dec_support 目前支持以下平台:

  • Android
  • iOS
  • Web

贡献

如果你想为这个项目贡献,请遵循以下指南:

  • 提交一个描述错误或功能请求的问题。
  • 在新分支中进行更改并提交到你的仓库。
  • 提交包含更改的拉取请求。

提交问题 - 点击这里

买杯咖啡

Buy Me A Coffee


示例代码

// Copyright 2021. All rights reserved

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example of Package"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "Total Qty of product",
              style: TextStyle(
                fontSize: 23,
                fontWeight: FontWeight.w600,
              ),
            ),
            FieldIncDecSupport(
              elevation: 2,
              backColor: Colors.orange,
              value: 0,
              maxLimit: 99,
              borderRadius: 12,
              leftIcon: const Icon(Icons.abc_outlined),
              rightIcon: const Icon(Icons.abc_outlined),
              valColor: const Color(0xffffffff),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter数字增减控制插件field_inc_dec_support的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数字增减控制插件field_inc_dec_support的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用field_inc_dec_support插件来实现数字增减控制的示例代码。field_inc_dec_support插件通常用于在UI上提供一个简单的加减按钮来控制数值。假设你已经通过flutter pub add field_inc_dec_support命令将插件添加到你的项目中。

1. 添加依赖

首先,确保你的pubspec.yaml文件中包含该插件的依赖项:

dependencies:
  flutter:
    sdk: flutter
  field_inc_dec_support: ^latest_version  # 请替换为最新版本号

2. 导入插件

在你的Dart文件中导入插件:

import 'package:field_inc_dec_support/field_inc_dec_support.dart';

3. 使用插件

下面是一个完整的示例,展示了如何在Flutter中使用field_inc_dec_support插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter = _counter > 0 ? _counter - 1 : 0; // 避免负数
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFieldWithIncrementDecrement(
              initialValue: _counter.toString(),
              onIncrement: () => _incrementCounter(),
              onDecrement: () => _decrementCounter(),
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Counter',
              ),
            ),
            SizedBox(height: 20),
            Text(
              'You have pushed the button this many times: $_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // 这个按钮仅作为示例,实际功能由TextFieldWithIncrementDecrement处理
    );
  }
}

// 自定义TextFieldWithIncrementDecrement组件(如果需要,你可以直接使用插件提供的组件)
class TextFieldWithIncrementDecrement extends StatefulWidget {
  final String initialValue;
  final VoidCallback onIncrement;
  final VoidCallback onDecrement;
  final TextInputType keyboardType;
  final InputDecoration decoration;

  TextFieldWithIncrementDecrement({
    required this.initialValue,
    required this.onIncrement,
    required this.onDecrement,
    this.keyboardType = TextInputType.text,
    this.decoration = const InputDecoration(),
  });

  @override
  _TextFieldWithIncrementDecrementState createState() => _TextFieldWithIncrementDecrementState();
}

class _TextFieldWithIncrementDecrementState extends State<TextFieldWithIncrementDecrement> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.remove),
          onPressed: widget.onDecrement,
        ),
        SizedBox(width: 10),
        TextField(
          controller: _controller,
          keyboardType: widget.keyboardType,
          decoration: widget.decoration.copyWith(suffixIcon: null),
          onEditingComplete: () {
            if (int.tryParse(_controller.text) != null) {
              // 可以在这里添加额外的逻辑
            }
          },
          onChanged: (value) {
            // 这里可以添加输入验证逻辑
          },
        ),
        SizedBox(width: 10),
        IconButton(
          icon: Icon(Icons.add),
          onPressed: widget.onIncrement,
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

注意事项

  1. 插件版本:请确保你使用的是field_inc_dec_support插件的最新版本。
  2. 自定义组件:上面的示例中,我创建了一个自定义的TextFieldWithIncrementDecrement组件,但如果你直接使用插件提供的组件,可能代码会更加简洁。
  3. 状态管理:这个示例使用了简单的状态管理(setState),但在更复杂的应用中,你可能需要使用更高级的状态管理解决方案(如Provider、Riverpod或MobX)。

希望这个示例能帮到你!

回到顶部