Flutter屏幕适配与工具函数插件flutter_fit_utils_provider的使用

Flutter屏幕适配与工具函数插件flutter_fit_utils_provider的使用

标题

Flutter屏幕适配与工具函数插件flutter_fit_utils_provider的使用

内容

此包是一个用于轻松创建模型数据提供者的Flutter包。该包是flutter_fit_utils环境的一部分。要了解其他与flutter_fit_utils相关的包，请查看下方的图表。

特性

此包允许您使用预建的提供者或自定义提供者来管理您的模型数据。这些提供者随后会使用服务来管理您的数据存储库。

开始使用

1. 进入您的pubspec.yaml文件
2. 在dependencies部分添加以下行：

flutter_fit_utils_provider: ^1.0.0

获取依赖项

flutter pub get

使用

请参阅example/main.dart以获取完整的实现示例。

创建一个提供者

创建一个继承自DataProvider或ItemsProvider的类。如果需要单个模型，则使用DataProvider；如果需要列表，则使用ItemsProvider。非常简单！

/// Provider for [User] data.
class UserProvider extends DataProvider<User> {
  /// Creates a new [UserProvider].
  UserProvider(super.service, super.factoryFunc);

  [@override](/user/override)
  bool isInstanceValid(User instance) {
    /// Implement your logic here...
    return instance.name != "Bob";
  }
}

如果您需要，可以覆盖方法以实现自己的逻辑。

/// Provider for [User] data.
class UserProvider extends DataProvider<User> {
  /// Creates a new [UserProvider].
  UserProvider(super.service, super.factoryFunc);

  [@override](/user/override)
  Future<void> initialize({dynamic data, String userId = ""}) async {
    /// Your own logic here.
  }

  [@override](/user/override)
  bool isInstanceValid(User instance) {
    /// Implement your logic here...
    return instance.name != "Bob";
  }
}

您可以始终通过继承FitProvider或FitFormProvider来自定义提供者。

等待提供者的初始化

FitProviders有一个初始化流，您可以监听它。这样，当您的提供者准备好时，您可以更新UI。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: context.read<UserProvider>().initializationStream,
      builder: (context, snapshot) {
        if (!context.watch<UserProvider>().initialized) {
          return const CircularProgressIndicator();
        }

        // Show your UI here.
        return const SizedBox.shrink();
      },
    );
  }
}

补充信息

随时提供反馈！此包也接受贡献。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_fit_utils/flutter_fit_utils.dart';
import 'package:flutter_fit_utils_provider/flutter_fit_utils_provider.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<UserProvider>(
            create: (_) => UserProvider(
                FirestoreService<User>("MyFirestoreCollection", User.fromModel),
                () => const User())),
      ],
      child: const MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: context.read<UserProvider>().initializationStream,
      builder: (context, snapshot) {
        if (!context.watch<UserProvider>().initialized) {
          return const CircularProgressIndicator();
        }

        // Show your UI here.
        return const SizedBox.shrink();
      },
    );
  }
}

/// Provider for [User] data.
class UserProvider extends DataProvider<User> {
  /// Creates a new [UserProvider].
  UserProvider(super.service, super.factoryFunc);

  [@override](/user/override)
  bool isInstanceValid(User instance) {
    /// Implement your logic here...
    return instance.name != "Bob";
  }
}

/// Example user class.
class User extends Modelable {
  static const String _nameKey = "name";

  /// User's last name.
  final String name;

  /// Creates a new user.
  const User({this.name = "", super.id, super.userId});

  /// Creates an invalid user.
  const User.invalid()
      : name = "",
        super.invalid();

  /// Creates a user from a [Model].
  User.fromModel(super.model)
      : name = model.data[_nameKey].toString(),
        super.fromModel();

  [@override](/user/override)
  User copyWith({String? id, String? userId, bool? invalid, String? name}) =>
      User(
        name: name ?? this.name,
        id: id ?? this.id,
        userId: userId ?? this.userId,
      );

  [@override](/user/override)
  Model toModel() => Model(
        id: id,
        userId: userId,
        data: {
          _nameKey: name,
        },
      );
}