Flutter功能探索插件firefly的使用方法

Flutter功能探索插件firefly的使用

使用此方便的Firestore构建器小部件创建漂亮的Flutter小部件树。

额外信息

如果你使用VS Code，有一个名为Firefly Snippets的扩展可以用于Firefly！

####Flutter功能探索插件firefly 使用方法

开始使用Firefly有三个步骤。

设置Firebase

我们推荐遵循FlutterFire指南来设置你的应用与Firebase。

重要的是在使用任何Firefly小部件之前先设置Firebase。我们喜欢使用FutureBuilder来初始化Firebase。

Widget build(BuildContext context) {
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  return FutureBuilder(
    // 初始化FlutterFire:
    future: _initialization,
    builder: (context, snapshot) {
      // 检查错误
      if (snapshot.hasError) {
        return Text('出现了错误...');
      }

      // 初始化完成后显示您的应用程序
      if (snapshot.connectionState == ConnectionState.done) {
        return FireflyApp();
      }

      // 否则，在初始化完成之前显示一些内容
      return Text('加载中...');
    },
  );
}

使用FireflyProvider

FireflyProvider将提供所有Firefly小部件正确的Firestore数据库实例。它还需要一个FireflyDataBuilder列表。FireflyDataBuilder的目的是为Firefly提供正确的模型和构造函数，以便在各种构建器参数中创建对象之前，它可以创建您的对象。

class FireflyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final firestore = FirebaseFirestore.instance;

    final buildList = [
      FireflyDataBuilder(
        model: Person,
        builder: (json) => Person.fromJson(json),
      )
    ];

    return FireflyProvider(
      instance: firestore,
      modelbuilderList: buildList,
      child: App(),
    );
  }
}

最后，你可以使用Firefly

Firefly需要两个东西才能正常工作。 collection参数用于让Firefly知道从哪个Firestore集合检索数据。 类型对象在各种builder参数中预期被访问。这里我们期望一个Person，通过添加<Person>。

然后我们可以使用builder来获取一个Person对象列表，这里描述为state。

class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'persons',
          builder: (context, state) => ListView.builder(
            itemCount: state.length,
            itemBuilder: (context, index) => Text(state[index].name),
          ),
        ),
      ),
    );
  }
}

使用Firefly小部件

Firefly小部件有许多参数：

列表构建器

builder是一种检索创建对象的方式。但你也可以使用简写listBuilder来获取已经创建的ListView。

Firefly<Person>(
  collection: 'persons',
  listBuilder: (context, state, index) => Text(state[index].name),
),

查询

你还可以直接在小部件上查询Firestore。使用query参数和Query模型。

import 'package:cloud_firestore/cloud_firestore.dart' hide Query;

Firefly<Person>(
  collection: 'persons',
  listBuilder: (context, state, index) => Text(state[index].name),
  queries: [Query('age')..isEqualTo(22)],
),

默认查询可以在FireflyProvider中定义。这些将在所有Firefly小部件的使用中应用。

FireflyProvider(
  defaultQueries: [Query('age')..isEqualTo(22)],
  instance: FirebaseFirestore.instance,
  modelbuilderList: [...],
  child: ...
),

覆盖加载状态

如果想在Firestore加载时显示另一个小部件，只需使用loading参数覆盖任何你喜欢的小部件。

Firefly<Person>(
  collection: 'players',
  listBuilder: (context, state, index) => Text(state[index].name),
  loading: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
),

处理错误

如果接收数据时出现错误，使用error参数处理它。

Firefly<Person>(
  collection: 'players',
  listBuilder: (context, state, index) => Text(state[index].name),
  error: (error) => Text(error.toString()),
),

完整示例Demo

以下是完整的示例代码，包括如何初始化Firebase，如何使用FireflyProvider，以及如何使用Firefly小部件。

import 'package:cloud_firestore/cloud_firestore.dart' hide Query;
import 'package:firebase_core/firebase_core.dart';
import 'package:firefly/firefly.dart';
import 'package:flutter/material.dart';

/// 创建匹配Firestore文档的模型。
class Person {
  final String name;
  final int age;

  Person(this.name, this.age);

  factory Person.fromJson(Map<String, dynamic> json) {
    return Person(json['name'], json['age']);
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Setup(),
    );
  }
}

/// 确保在使用任何Firefly小部件之前初始化Firebase。
class Setup extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Future<FirebaseApp> _initialization = Firebase.initializeApp();

    return FutureBuilder(
      future: _initialization,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('出现了错误！');
        }

        if (snapshot.connectionState == ConnectionState.done) {
          final firestore = FirebaseFirestore.instance;

          /// [FireflyDataBuilder]需要模型和处理Json数据的构造函数。
          final buildList = [
            FireflyDataBuilder(
              model: Person,
              builder: (json) => Person.fromJson(json),
            )
          ];

          /// 一旦Firebase初始化完成，你需要用[FireflyProvider]包装你的应用。
          /// 它需要你的Firestore实例和创建对象以返回的[FireflyDataBuilders]列表。
          /// 如果你想在所有请求中使用查询，使用[defaultQueries]参数。
          return FireflyProvider(
            instance: firestore,
            modelbuilderList: buildList,
            child: App(),
          );
        }

        // 否则，在初始化完成之前显示一些内容
        return Text('加载中...');
      },
    );
  }
}

/// 然后可以在任何地方使用[Firefly]小部件。
/// 记得传递模型作为[Firefly<Model>]以便你知道在[builders]状态中期望什么。
/// 告诉Firefly你想要的集合，并在构建器回调中获取构造的数据列表。
class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'persons',
          builder: (context, state) => ListView.builder(
            itemCount: state.length,
            itemBuilder: (context, index) => Text(state[index].name),
          ),
        ),
      ),
    );
  }
}

/// 或者你可以使用简写[listBuilder]来获取已经创建的[ListView]。
class ListBuilder extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'players',
          listBuilder: (context, state, index) => Text(state[index].name),
        ),
      ),
    );
  }
}

/// 你也可以直接在小部件上查询Firestore。
/// 使用[queries]参数和[Query]模型。
/// 你可以链式调用多个查询。
class QueryFirestore extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'players',
          listBuilder: (context, state, index) => Text(state[index].name),
          queries: [Query('age')..isEqualTo(22)],
        ),
      ),
    );
  }
}

/// 如果想在Firestore加载时显示另一个小部件，只需使用[loading]参数覆盖任何你喜欢的小部件。
class OverrideLoading extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'players',
          listBuilder: (context, state, index) => Text(state[index].name),
          loading: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

/// 如果接收数据时出现错误，使用[error]参数处理它。
class HandleErrors extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Firefly<Person>(
          collection: 'players',
          listBuilder: (context, state, index) => Text(state[index].name),
          error: (error) => Text(error.toString()),
        ),
      ),
    );
  }
}