Flutter家居管理插件flutter_homebase的功能使用

Flutter家居管理插件flutter_homebase的功能使用

开始使用

要将flutter_homebase添加到你的项目中，首先需要在pubspec.yaml文件中添加依赖项。你可以从pub.dev或者GitHub安装。

从pub.dev安装

dependencies:
  flutter_homebase: ^0.0.1

从GitHub安装

dependencies:
  flutter_homebase:
    git:
      url: https://github.com/arminmehraeen/Flutter-Homebase.git

然后，在你的Dart文件中导入flutter_homebase包：

import 'package:flutter_homebase/flutter_homebase.dart';

使用方式

flutter_homebase提供了多种自定义类、小部件和扩展功能，方便开发者快速构建应用。以下是一些常用的组件和功能的示例。

自定义类

• MScrollBehavior

自定义小部件

• MCard
• MInkwell
• MSlider
• MStepperItem
• MButton

表单小部件

• MTimeFormField
• MTextFormField
• MRangeSelectorField
• MPasswordTextFormField
• MNumberFormField
• MMultiChooseFormField
• MChooseFormField
• MCheckBoxFormField

扩展功能

• 状态码扩展
• 数字扩展
• 波斯数字扩展

完整示例

下面是一个完整的示例，展示了如何使用flutter_homebase中的表单小部件来创建一个简单的表单界面。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Homebase Package Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _formKey = GlobalKey<FormState>();
  bool checkBoxValue = true;
  int numberValue = 0;
  String chooseValue = "ITEM 1";
  String passwordValue = "Password";
  String textValue = "Text";
  List<String> multiChooseValue = ["ITEM 1", "ITEM 2"];
  List<String> items = ["ITEM 1", "ITEM 2", "ITEM 3", "ITEM 4"];
  List<double> minMaxValue = [-30, 60];
  TimeOfDay timeValue = const TimeOfDay(hour: 12, minute: 30);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Flutter Homebase Package Example",
          style: TextStyle(fontSize: 15),
        ),
        centerTitle: true,
      ),
      body: MCard(
        widget: Form(
          key: _formKey,
          child: Column(
            children: [
              // 时间选择器
              MTimeFormField(
                label: "MTimeFormField",
                onChange: (value) {
                  setState(() {
                    timeValue = value;
                  });
                },
                value: timeValue,
              ),
              // 文本输入框
              MTextFormField(
                label: "MTextFormField",
                initValue: textValue,
                onSaved: (value) {
                  setState(() {
                    textValue = value;
                  });
                },
              ),
              // 范围选择器
              MRangeSelectorField(
                label: "MRangeSelectorField",
                onChange: (min, max) {
                  setState(() {
                    minMaxValue[0] = min;
                    minMaxValue[1] = max;
                  });
                },
                max: 100,
                min: -100,
                start: minMaxValue[0],
                end: minMaxValue[1],
              ),
              // 密码输入框
              MPasswordTextFormField(
                label: "MPasswordTextFormField",
                initValue: passwordValue,
                onSaved: (value) {
                  setState(() {
                    passwordValue = value;
                  });
                },
              ),
              // 数字输入框
              MNumberFormField(
                label: "MNumberFormField",
                onChange: (value) {
                  setState(() {
                    numberValue = value;
                  });
                },
                value: numberValue,
                min: -100,
                max: 100,
              ),
              // 多选列表
              MMultiChooseFormField(
                label: "MMultiChooseFormField",
                items: items,
                values: multiChooseValue,
              ),
              // 单选列表
              MChooseFormField(
                label: "MChooseFormField",
                items: items,
                value: chooseValue,
              ),
              // 复选框
              MCheckBoxFormField(
                label: "MCheckBoxFormField",
                onChange: (value) {
                  setState(() {
                    checkBoxValue = value;
                  });
                },
                initValue: checkBoxValue,
              ),
              // 提交按钮
              MButton(
                onTap: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                title: "Submit",
                icon: Icons.add,
              )
            ],
          ),
        ),
      ),
    );
  }
}