Flutter代码片段生成工具插件snippet_coder_utils的使用

插件简介

SnippetCoderUtils 是一个基于Flutter SDK构建的实用工具包，旨在使Flutter开发变得比以往更加轻松和愉快。

功能特性

• FormHelper：用于创建自定义UI TextBox、DropDown、Buttons。
• DataTable Utility：支持Generic Collection、Sorting、Edit、Delete & Custom Action Button的数据表格。
• ProgressHUD (Heads Up Display)：提供加载指示器。
• Hex Color Converter：将HEX颜色转换为Flutter颜色。
• Multiple Image Picker：支持从相机或图库中添加和删除图片。

安装

在pubspec.yaml文件中添加以下内容：

dependencies:
  snippetcoder_utils: ^1.0.13

使用示例

FormHelper

inputFieldWidget 示例

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/FormHelper.dart';

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginModel> {
  final loginModel = LoginModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            FormHelper.inputFieldWidget(
              context,
              "host",
              "Host URL",
              (onValidateVal) {
                if (onValidateVal.isEmpty) {
                  return 'Host URL can\'t be empty.';
                }
                return null;
              },
              (onSavedVal) => {
                this.loginModel.host = onSavedVal,
              },
              initialValue: this.loginModel.host,
              obscureText: false,
              borderFocusColor: Theme.of(context).primaryColor,
              prefixIconColor: Theme.of(context).primaryColor,
              borderColor: Theme.of(context).primaryColor,
            ),
            SizedBox(height: 20),
            FormHelper.submitButton(
              "Login",
              () {},
              btnColor: Theme.of(context).primaryColor,
              borderColor: Theme.of(context).primaryColor,
              txtColor: Colors.black,
            ),
          ],
        ),
      ),
    );
  }
}

class LoginModel {
  String host = '';
}

dropDownWidget 示例

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/FormHelper.dart';

class ProductTypeForm extends StatefulWidget {
  @override
  _ProductTypeFormState createState() => _ProductTypeFormState();
}

class _ProductTypeFormState extends State<ProductTypeForm> {
  final requestModel = RequestModel();
  List<dynamic> productTypesList = [];

  @override
  void initState() {
    super.initState();
    productTypesList.add({"id": "simple", "name": "Simple"});
    productTypesList.add({"id": "variable", "name": "Variable"});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Select Product Type')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormHelper.dropDownWidget(
          context,
          "Select Product Type",
          "",
          this.productTypesList,
          (onChangedVal) {
            this.requestModel.productType = onChangedVal ?? "";
          },
          (onValidateVal) {
            if (onValidateVal == null) {
              return 'Please Select Product Type';
            }
            return null;
          },
          borderFocusColor: Theme.of(context).primaryColor,
          borderColor: Theme.of(context).primaryColor,
          borderRadius: 10,
        ),
      ),
    );
  }
}

class RequestModel {
  String productType = '';
}

ListUtils

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/ListUtils.dart';

class CategoryListPage extends StatelessWidget {
  final model = CategoryListModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Category List')),
      body: ListUtils.buildDataTable<CategoryModel>(
        context,
        ["Name", "Description", ""],
        ["name", "description", ""],
        true,
        0,
        model.categoriesList,
        (CategoryModel onEditVal) {
          print(onEditVal.name);
        },
        (CategoryModel onRemoveVal) {
          print(onRemoveVal.id);
        },
        onSort: (columnIndex, columnName, ascending) {
          print(columnName);
          print(ascending);
        },
        headingRowColor: Theme.of(context).primaryColor,
        actionWidget: Icon(
          Icons.add,
          color: Colors.red,
        ),
        onActionTap: (CategoryModel model) {
          print(model.id);
        },
      ),
    );
  }
}

class CategoryListModel {
  List<CategoryModel> categoriesList = [
    CategoryModel(id: '1', name: 'Electronics', description: 'All electronics'),
    CategoryModel(id: '2', name: 'Books', description: 'All books'),
  ];
}

class CategoryModel {
  final String id;
  final String name;
  final String description;

  CategoryModel({required this.id, required this.name, required this.description});
}

ProgressHUD

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/ProgressHUD.dart';

class LoadingPage extends StatefulWidget {
  @override
  _LoadingPageState createState() => _LoadingPageState();
}

class _LoadingPageState extends State<LoadingPage> {
  bool isApiCallProcess = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ProgressHUD Example')),
      body: ProgressHUD(
        child: pageUI(),
        inAsyncCall: isApiCallProcess,
        opacity: 0.3,
      ),
    );
  }

  Widget pageUI() {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          setState(() {
            isApiCallProcess = true;
            // Simulate an API call
            Future.delayed(Duration(seconds: 3), () {
              setState(() {
                isApiCallProcess = false;
              });
            });
          });
        },
        child: Text('Start API Call'),
      ),
    );
  }
}

HexColor

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/HexColor.dart';

class HexColorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HexColor Example')),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          color: HexColor("#FC4136"),
        ),
      ),
    );
  }
}

MultiImagePicker

import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/MultiImagePicker.dart';

class ImagePickerPage extends StatefulWidget {
  @override
  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  List<Object> images = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MultiImagePicker Example')),
      body: MultiImagePicker(
        totalImages: 6,
        imageSource: ImagePickSource.camera,
        initialValue: this.images.map((e) => e.toString()).toList(),
        onImageChanged: (images) {
          setState(() {
            this.images = images;
          });
        },
        imageType: ImageType.list,
        addImageWidget: Card(
          child: SizedBox(
            width: 100,
            child: Center(
              child: SizedBox(
                width: 50,
                height: 50,
                child: Image.asset("assets/images/add-photo.png"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

通过这些示例，您可以更好地理解和使用snippet_coder_utils插件的各种功能。希望这些代码片段能帮助您更高效地进行Flutter开发！