flutter - 如何在 Flutter 中使用 Riverpod 处理基于应用程序状态的条件图标交换？

Question

在我的自定义中，我想根据使用包的应用程序状态值AppBar.leading显示某个值。这也取决于平台有条件地切换。除了使用此示例的一些设置样板之外，我不确定如何继续。我将在下面显示我当前的状态：IconButtonRiverpodIconButton

模型/flash_status.dart：

enum FlashStatus {
  auto,
  on,
  off,
}

// ignore: missing_return
String flashStatusInStringFormat(FlashStatus flashStatus) {
  switch (flashStatus) {
    case FlashStatus.auto:
      return 'Auto';
    case FlashStatus.on:
      return 'On';
    case FlashStatus.off:
      return 'Off';
  }
}

提供者/提供者.dart：

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:MyApp/models/flash_status.dart';

final flashStatusProvider = StateProvider((ref) => FlashStatus.auto);

库/main.dart：

import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {...

小部件/tool_bar.dart：

import 'dart:io' show Platform;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:MyApp/providers/providers.dart';

class ToolBar extends StatelessWidget with PreferredSizeWidget {
  @override
  final Size preferredSize;

  ToolBar({
    Key key,
  })  : preferredSize = Size.fromHeight(50.0),
        super(key: key);

  IconData get flashIconAuto =>
      Platform.isAndroid ? Icons.flash_auto : CupertinoIcons.bolt_badge_a;

  IconData get flashIconOn =>
      Platform.isAndroid ? Icons.flash_on : CupertinoIcons.bolt_fill;

  IconData get flashIconOff =>
      Platform.isAndroid ? Icons.flash_off : CupertinoIcons.bolt_slash;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      automaticallyImplyLeading: false,
      backgroundColor: Colors.transparent,
      leading: IconButton(
        icon: Icon(flashIconAuto),
        tooltip: 'Turn on camera flash',
        onPressed: () {},
      ),
    );
  }
}

我不知道从哪里开始，我必须用它Consumer来包裹IconButton吧？如何根据状态有条件地显示正确的图标？我是否缺少更新状态的模型方法？onPressed 处理程序是什么样的？

Answer 1

    import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

enum FlashStatus {
  auto,
  on,
  off,
}

final flashStatusProvider = StateProvider((ref) => FlashStatus.auto);

class FlashScreen extends StatefulWidget {
  @override
  _FlashScreenState createState() => _FlashScreenState();
}

class _FlashScreenState extends State<FlashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ToolBar(),
    );
  }
}

class ToolBar extends StatelessWidget with PreferredSizeWidget {
  @override
  final Size preferredSize;

  ToolBar({
    Key key,
  })  : preferredSize = Size.fromHeight(50.0),
        super(key: key);

  IconData get flashIconAuto =>
      Platform.isAndroid ? Icons.flash_auto : CupertinoIcons.bolt_badge_a;

  IconData get flashIconOn =>
      Platform.isAndroid ? Icons.flash_on : CupertinoIcons.bolt_fill;

  IconData get flashIconOff =>
      Platform.isAndroid ? Icons.flash_off : CupertinoIcons.bolt_slash;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      automaticallyImplyLeading: false,
      backgroundColor: Colors.transparent,
      leading: Consumer(builder: (context, ScopedReader watch, child) {
        final status = watch(flashStatusProvider);
        print(status.state);
        switch (status.state) {
          case FlashStatus.on:
            return IconButton(
              icon: Icon(flashIconOff),
              tooltip: 'Turn off camera flash',
              onPressed: () =>
                  context.read(flashStatusProvider).state = FlashStatus.off,
            );
            break;
          case FlashStatus.off:
            return IconButton(
                icon: Icon(flashIconOn),
                tooltip: 'Turn on camera flash',
                onPressed: () =>
                    context.read(flashStatusProvider).state = FlashStatus.on);
            break;
          default:
            return IconButton(
                icon: Icon(flashIconOn),
                tooltip: 'Turn on camera flash',
                onPressed: () =>
                    context.read(flashStatusProvider).state = FlashStatus.on);
        }
      }),
    );
  }
}