Flutter快速开发插件quickly的使用

Table of Contents

• About The Project
  • Built With
• Usage
  • Flutter
  • Dart
    • List Extensions
    • Map Extensions
    • Num Extensions
• Contributing
• License
• Contact

About The Project

Quickly 是一个强大的 Flutter 包，旨在通过提供各种扩展方法来增强开发体验。它支持 String、List 和 Map 类型，使编码更加高效和简洁。该包受 Bootstrap 和 Tailwind CSS 的启发，使用 Flutter 和 Dart 构建，提供了许多实用函数，如应用内边距、可见性控制和文本样式等。

Built With

• Flutter
• Dart

Usage

Flutter

以下是使用 Quickly 在 Flutter 中创建一些常见 UI 元素的示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Quickly'),
        ),
        body: Center(
          child: Column(
            spacing: 12,
            children: [
              Row(
                spacing: 12,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    text: 'abc',
                    size: BtnSize.tiny,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    text: 'abc',
                    size: BtnSize.small,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    text: 'abc',
                    color: FxColor.primary,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    text: 'abc',
                    size: BtnSize.medium,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    text: 'abc',
                    size: BtnSize.large,
                  ),
                ],
              ),
              Row(
                spacing: 12,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    icon: Icons.person,
                    size: BtnSize.tiny,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    icon: Icons.person,
                    size: BtnSize.small,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    icon: Icons.person,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    icon: Icons.person,
                    size: BtnSize.medium,
                  ),
                  FxButton(
                    type: BtnType.solid,
                    onPressed: () {},
                    icon: Icons.person,
                    size: BtnSize.large,
                  ),
                ],
              ),
              FxTextFormField(
                label: "Name",
                hintText: "Name",
                border: true,
                maxLines: 5,
              ),
              FxTextFormField(isRequired: false),
              QuicklyCheckbox(),
              QuicklyRadio(),
              QuicklySwitch(),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<QuicklyCheckbox> createState() => _QuicklyCheckboxState();
}

class _QuicklyCheckboxState extends State<QuicklyCheckbox> {
  bool _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return FxCheckbox(
      value: _isChecked,
      onChanged: (v) => setState(() {
        _isChecked = v;
      }),
    );
  }
}

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

  @override
  State<QuicklyRadio> createState() => _QuicklyRadioState();
}

class _QuicklyRadioState extends State<QuicklyRadio> {
  String name = "male";

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 12,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FxRadio(
          groupValue: name, // 当前选中的值
          value: "male", // 此单选按钮的唯一值
          onChanged: (value) => setState(() {
            name = value; // 更新选中的值
          }),
        ),
        FxRadio(
          groupValue: name, // 当前选中的值
          value: "female", // 此单选按钮的唯一值
          onChanged: (value) => setState(() {
            name = value; // 更新选中的值
          }),
        ),
      ],
    );
  }
}

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

  @override
  State<QuicklySwitch> createState() => _QuicklySwitchState();
}

class _QuicklySwitchState extends State<QuicklySwitch> {
  bool _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return FxSwitch(
      value: _isChecked,
      onChanged: (v) => setState(() {
        _isChecked = v;
      }),
    );
  }
}

Dart

以下是一些在 Dart 中使用 Quickly 扩展方法的示例：

List Extensions

final numbers = [5, 2, 9, 1, 7];
final people = [{'name': 'Bob', 'age': 30}, {'name': 'Alice', 'age': 25}];

// 排序列表（升序）
print(numbers.sorted()); // [1, 2, 5, 7, 9]

// 排序列表（降序）
print(numbers.sortedDec()); // [9, 7, 5, 2, 1]

// 按键排序对象列表
print(people.sortedBy('age')); // [{'name': 'Alice', 'age': 25}, {'name': 'Bob', 'age': 30}]

// 将列表分成大小为 n 的块
print(numbers.chunk(2)); // [[5, 2], [9, 1], [7]]

// 将列表分成 n 个相等的部分
print(numbers.split(3)); // [[5, 2], [9], [1, 7]]

// 获取给定键的所有值
print(people.pluck('name')); // ['Bob', 'Alice']

Map Extensions

final person = {'name': 'Bob', 'age': 30, 'gender': 'male'};

// 检查键值对是否存在
print(person.has('gender', 'male')); // true

// 获取 'id' 键的值（如果存在）
print(person.getId()); // null

// 获取指定键的字符串值（如果存在）
print(person.getString('name')); // 'Bob'

// 获取指定键的布尔值（如果存在）
print(person.getBool('gender')); // false

// 只保留指定键的键值对
print(person.retainKeys(['name', 'age'])); // {'name': 'Bob', 'age': 30}

// 获取指定键的值（如果不存在则返回默认值）
print(person.match('age', 'Unknown')); // 30

Num Extensions

// 获取整数的序数后缀
print(8.suffix()); // '8th'

// 获取带后缀的浮点数
print(10.5.suffix('$')); // '10.5$'

// 获取对应月份的名称
print(1.getMonthName()); // 'January'
print(1.getMonthName(isShort: true)); // 'Jan'

// 获取对应星期几的名称
print(3.getWeekName()); // 'Wednesday'
print(3.getWeekName(isShort: true)); // 'Wed'

Contributing

我们欢迎并非常感谢您对 Quickly 的贡献。无论您是报告错误、建议新功能还是帮助开发此包，我们都鼓励您参与其中。具体方式如下：

• Report a bug：如果您发现任何问题，请打开一个 issue 并尽可能详细地描述问题。
• Suggest a feature：如果您有新功能或改进的想法，请打开一个 issue 并分享您的想法。
• Contribute code：如果您有兴趣进一步开发此包，请 fork 仓库并提交 pull request。请确保运行测试并遵循项目的编码风格。
• Spread the word：如果您觉得 Quickly 很有用，请告诉您的朋友和同事，并在 GitHub 上给项目加星。

License

本项目采用 MIT 许可证分发。详情请参见 LICENSE 文件。

Contact

Aniket Khote - @aniketkhote99 - aniketkhote99@gmail.com

Project Link: https://github.com/Aniketkhote/Quickly

希望这些信息能帮助您更好地理解和使用 Quickly 插件！如果有任何问题或需要进一步的帮助，请随时联系我。