Flutter 自定义构建插件 tiede_builder_pkg 的使用

特性

待办事项：此插件用于无渲染整个界面的UI构建器，仅重新渲染需要更改的部件。

开始使用

在 pubspec.yaml 文件中添加依赖

1. 打开 pubspec.yaml 文件。
2. 将以下依赖项添加到你的项目中：

dependencies:
     tiede_builder_pkg: ^1.0.1

获取依赖项

在终端中运行以下命令以获取所有依赖项：

flutter pub get

使用方法

消费测试 API

在 Cidades 类中消费 API 以便在数据发生变化时进行通知。

import "dart:convert";
import "package:http/http.dart" as http;

class ApiConsumer {

  Future<List> get(String uf) async {
    try{
      var response = await http.get(Uri.parse('https://brasilapi.com.br/api/ibge/municipios/v1/$uf?providers=dados-abertos-br,gov,wikipedia'));
      return jsonDecode(response.body);
    } catch(e) {
      return [];
    }
  }

}

使用 TiedeNotify 类来通知变量变化

TiedeNotify 类用于在变量发生改变时通知并重建相关部件。

import 'package:tiede_builder_pkg/tiede_builder_pkg.dart';
import 'api_consumer.dart';

class Cidades extends TiedeNotify{

  List cidades = [];
  String uf = 'MG';

  getCidades({String uf = 'MG'}) async {
    this.uf = uf;
    cidades.clear();

    notify(isLoading: true); // --------> 通知更改以重建部件并激活加载指示器

    ApiConsumer().get(uf).then((value) {
      cidades = value;
      print('get ok');

      notify(); // --------> 通知更改以在数据修改后重建部件

    });
  }

}

使用 TiedeBuilder 类来重建需要变更的部件

TiedeBuilder 类用于根据状态重建特定的部件。

import 'package:flutter/material.dart';
import 'package:tiede_builder_pkg/tiede_builder_pkg.dart';
import 'cidades_controller.dart';

class HomePage extends StatelessWidget {
    HomePage({super.key});

    Cidades cidades = Cidades();

    @override
    Widget build(BuildContext context) {
        print('build home page');

        return Scaffold(
            appBar: AppBar(
                title: const Text('Cidades'),
            ),
            body: Column(
                children: [
                    Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: TextField(
                            decoration: const InputDecoration(
                                hintText: 'UF',
                                border: OutlineInputBorder(),
                            ),
                            onChanged: (value) {
                                if(value.toUpperCase().length == 2) {
                                    cidades.getCidades(uf: value.toUpperCase());
                                }
                            }
                        ),
                    ),
                    Flexible(
                        child: Padding(
                            padding: const EdgeInsets.all(20.0),
                            child: TiedeBuilder(
                                notify: cidades,
                                builder: (context)=>
                                    cidades.isLoading 
                                    ? const CircularProgressIndicator()
                                    : ListView(
                                        children: cidades.cidades.map((e) => Text('${e['nome']} - ${cidades.uf}')).toList(),
                                    ),
                            ),
                        ),
                    ),
                    TiedeBuilder(
                        notify: cidades,
                        builder: (context)=>
                            Padding(
                                padding: const EdgeInsets.all(12.0),
                                child: Text('Total de cidades: ${cidades.cidades.length}'),
                            ),
                    ),
                ],
            ),
        );
    }
}