Flutter插件easy_comp的安装及使用方法

Flutter插件easy_comp的安装及使用方法

组件

  • BaseWidget
  • BasefulWidget
  • BaseState
  • ValidatorUtil
  • FirebaseFirestoreRepository
  • CustomFuture

Flutter插件easy_comp安装

  1. 在 pubspec.yaml 文件中添加最新版本，并运行 dart pub get。
dependencies:
    easy_comp: ^0.0.12
  1. 导入包以在您的 Flutter 应用程序中使用。
import 'package:easy_comp/easy_comp.dart';

Flutter插件easy_comp使用方法

使用 BaseWidget 在 StatelessWidget 中

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

class EasyCompTeste extends BaseWidget {
  EasyCompTeste({Key? key});

  [@override](/user/override)
  Widget builder(BuildContext context, BoxConstraints constrains) {
    return Container(
      child: Center(
        child: Text("使用 BaseWidget"),
      ),
    );
  }
}

使用 BasefulWidget 在 StatefulWidget 中

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

class EasyCompTeste extends BasefulWidget {
  EasyCompTeste({Key? key});
  [@override](/user/override)
  _EasyCompTesteState createState() => _EasyCompTesteState();
}

class _EasyCompTesteState extends BasefulWidgetState<EasyCompTeste> {
  [@override](/user/override)
  Widget builder(BuildContext context, BoxConstraints constrains) {
    return Container(
      child: Center(
        child: Text("使用 BaseWidgetFull"),
      ),
    );
  }
}

使用 BaseState 在 StatefulWidget 中

import 'package:easy_comp/easy_comp.dart';
import 'package:easy_comp/src/testes/provider_basestate.dart';
import 'package:flutter/material.dart';

class TesteBaseState extends StatefulWidget {
  const TesteBaseState({super.key});
  [@override](/user/override)
  BaseState<TesteBaseState, ProviderBaseState> createState() => _TesteBaseStateState();
}

class _TesteBaseStateState extends BaseState<TesteBaseState, ProviderBaseState> {

  [@override](/user/override)
  void onInit() {
    super.onInit();
    debugPrint(provider.titulo);

    provider.titulo = "改变";
  }

  [@override](/user/override)
  void onResume() {
    super.onResume();
    provider.getDadosApi();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(provider.titulo);
  }
}

使用 FirebaseFirestoreRepository

import 'dart:developer';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:easy_comp/easy_comp.dart';
import 'package:easy_comp/src/utils/utils.dart';

class TesteModel {
  String id = "";
  String nome = "";
  String categoria = "INITIAL";
  TesteModel({
    required this.id,
    required this.nome,
    this.categoria = "INITIAL",
  });

  TesteModel.fromDocument(DocumentSnapshot<Map<String, dynamic>> doc) {
    final map = doc.data()!;
    id = getMap<String>(key: "id", map: map, retur: doc.id);
    nome = getMap<String>(key: "nome", map: map, retur: "");
    categoria = getMap<String>(key: "categoria", map: map, retur: "INITIAL");
  }

  TesteModel.fromJson(Map<String, dynamic> map, String? id) {
    this.id = id ?? (getMap<String>(key: "id", map: map, retur: ""));
    nome = getMap<String>(key: "nome", map: map, retur: "");
    categoria = getMap<String>(key: "categoria", map: map, retur: "INITIAL");
  }

  static Map<String, dynamic> toJson(TesteModel model) => {
        "id": model.id,
        "nome": model.nome,
        "categoria": model.categoria,
      };

  [@override](/user/override)
  String toString() => 'Teste(id: $id, nome: $nome, categoria: $categoria)\n';
}

class TesteRepository extends FirebaseFirestoreRepository<TesteModel> {
  TesteRepository()
      : super(
          collectionPath: 'BAIRROS',
          firestore: FirebaseFirestore.instance,
          fromJson: TesteModel.fromJson,
          toJson: TesteModel.toJson,
        );

  [@override](/user/override)
  CollectionReference<TesteModel> get collection => super.collection;

  Future<List<TesteModel>> todosByCategoria() async {
    final lista = await collection.where("categoria", isEqualTo: "INITIAL").get().then((value) => value.docs.map((e) => e.data()).toList());
    return lista;
  }
}

void main() async {
  final repo = TesteRepository();
  final todos = await repo.buscarTodos(
    descending: false,
    limit: 10,
    orderBy: "nome",
    where: QueryConstraint(field: "categoria", op: QueryOperation.isEqualTo, value: "INITIAL"),
    // 或者
    whereList: [
      QueryConstraint(field: "categoria", op: QueryOperation.isEqualTo, value: "INITIAL"),
      QueryConstraint(field: "nome", op: QueryOperation.isGreaterThanOrEqualTo, value: "测试"),
    ],
  );
  log(todos.toString());
}

使用 CustomFuture

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

class EasyCompTeste extends BaseWidget {
  EasyCompTeste({Key? key});

  Future<List<String>> getValues() async {
    await Future.delayed(const Duration(seconds: 2));
    return ["1", "2", "3"];
  }

  [@override](/user/override)
  Widget builder(BuildContext context, BoxConstraints constrains) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("测试"),
      ),
      body: CustomFuture<List<String>>(
        future: getValues(),
        emptyWidget: const Text("空"),
        withLoading: true,
        withError: true,
        erroBuilder: (error) {
          return Text(error.toString());
        },
        builder: (values) {
          return ListView.builder(
            itemCount: values.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(values[index]),
              );
            },
          );
        },
      ),
    );
  }
}

使用 EasyComp 主题与 EasyComp 的小部件结合

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

void main() {
  configStyles(
    primaryColor: Colors.redAccent,
  );

  runApp(
    MaterialApp(
      theme: EasyCompTheme.i.themeData,
      home: EasyCompTeste(),
    ),
  );
}

class EasyCompTeste extends BaseWidget {
  EasyCompTeste({Key? key});
  [@override](/user/override)
  Widget builder(BuildContext context, BoxConstraints constrains) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("测试"),
      ),
      body: Column(
        children: [
          Text(
            "根据主题样式进行美化",
            style: context.textApp.textBold.copyWith(
              fontSize: 25,
              color: context.colors.primary,
            ),
          ),
          EasyCompInputCalendar(
            onChange: (data) {
              print(data);
            },
          ),
          const SizedBox(height: 30),
          EasyCompInputCalendar.multiplos(
            labelText: "日期范围",
            onChange: (data1, data2) {
              print(data1);
              print(data2);
            },
          ),
          const SizedBox(height: 30),
          EasyCompInput(
            labelText: "输入文本",
            onChange: (data1) {
              print(data1);
            },
            icon: Icon(Icons.search),
          ),
          const SizedBox(height: 10),
          EasyCompInput(
            labelText: "输入密码",
            isPassword: true,
            onChange: (data1) {
              print(data1);
            },
            validator: (v) {},
          ),
          const SizedBox(height: 10),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: EasyCompInput(
                  labelText: "输入 cpfOrCnpj",
                  typeInput: EasyCompInputType.cpfOrCnpj,
                  onChange: (data1) {
                    print(data1);
                  },
                  validator: (v) {},
                  withValidation: true,
                  icon: Icon(Icons.search),
                ),
              ),
              Expanded(
                child: EasyCompInput(
                  labelText: "输入 cpfOrCnpj",
                  typeInput: EasyCompInputType.cpfOrCnpj,
                  onChange: (data1) {
                    print(data1);
                  },
                  validator: (v) {},
                  withValidation: true,
                ),
              ),
              EasyCompButton(
                width: 50,
                height: 35,
                child: Icon(Icons.search),
                onPressed: () {},
              ),
            ],
          ),
          const SizedBox(height: 10),
          EasyCompInput.future(
            labelText: "输入邮政编码",
            typeInput: EasyCompInputType.cep,
            onChange: (data1) {
              print(data1);
            },
            validator: ValidatorUtil(isFuture: true).required().custom(
              future: (value) async {
                Utils.delay(3);
                return true;
              },
            ).buildFuture(),
            withValidation: true,
          ),
          const SizedBox(height: 10),
          EasyCompInput.future(
            labelText: "输入cpf",
            typeInput: EasyCompInputType.cpf,
            onChange: (data1) {
              print(data1);
            },
          )
        ],
      ),
    );
  }
}

使用 EasyComp 验证器在 TextFormField 中

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

void main() {
  configStyles(
    primaryColor: Colors.redAccent,
  );

  runApp(
    MaterialApp(
      theme: EasyCompTheme.i.themeData,
      home: EasyCompTeste(),
    ),
  );
}

class EasyCompTeste extends BaseWidget {
  EasyCompTeste({Key? key});
  [@override](/user/override)
  Widget builder(BuildContext context, BoxConstraints constrains) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("EasyComp验证"),
      ),
      body: Column(
        children: [
          EasyCompInput(
            onChange: (data) {
              print(data);
            },
            // 验证器
            // validator: EasyCompValid.required("必填字段"),
            // validator: EasyCompValid.cpf("无效的CPF"),
            // validator: EasyCompValid.cnpj("无效的CNPJ"),
            // validator: EasyCompValid.email("无效的电子邮件"),
            // validator: EasyCompValid.maxLength(10, "最多10个字符"),
            // validator: EasyCompValid.minLength(10, "最少10个字符"),
            // validator: EasyCompValid.custom(
            //   验证: (value) {
            //     if(value == null) return false;
            //     return value == "123" ? true : false;
            //   },
            //   消息: "无效值",
            // ),
            validator: EasyCompValid.multiples([
              EasyCompValid.required("必填字段"),
              EasyCompValid.cpf("无效的CPF"),
            ]),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter插件easy_comp的安装及使用方法的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter插件easy_comp的安装及使用方法的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，easy_comp 可能是一个自定义或第三方插件，用于简化某些常见任务的开发，或者提供一些预定义的UI组件。由于你提到它的介绍为“undefined”，我们可以假设它可能是一个探索性质或自定义的插件。

以下是对 easy_comp 插件可能的探索和使用步骤：

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 easy_comp 插件的依赖项。假设它在 pub.dev 上有发布，你可以通过以下方式添加：

dependencies:
  flutter:
    sdk: flutter
  easy_comp: ^1.0.0  # 假设版本为1.0.0

然后运行 flutter pub get 来安装插件。

2. 导入插件

在你的 Dart 文件中导入 easy_comp 插件：

import 'package:easy_comp/easy_comp.dart';

3. 探索插件功能

由于 easy_comp 的介绍为“undefined”，我们可以通过以下方式来探索它的功能：

  • 查看文档: 如果插件有文档，通常在 pub.dev 页面或插件的 README.md 文件中可以找到。
  • 查看源代码: 你可以查看插件的源代码，了解它提供的类和功能。
  • 尝试使用: 通过尝试使用插件中的各种组件或功能来了解它的用途。

4. 使用插件

假设 easy_comp 提供了一些预定义的UI组件，你可以像使用其他Flutter组件一样使用它们。例如：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Comp Demo'),
      ),
      body: Center(
        child: EasyButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

在这个例子中，EasyButton 是假设 easy_comp 提供的一个自定义按钮组件。

5. 自定义组件

如果 easy_comp 允许自定义，你可以通过传递参数来定制组件的行为和外观。例如：

EasyButton(
  onPressed: () {
    print('Custom Button Pressed!');
  },
  text: 'Custom Button',
  color: Colors.blue,
  textColor: Colors.white,
);
回到顶部