消费者未使用 riverpod ChangeNotifier 重建 UI

Question

我能够将其缩小到 UI 未更新，消费者未使用更改的数据进行更新。我怎样才能让它正常工作？

目标是在模型开始和结束日期变量更改时重新加载应用栏文本小部件。

我检查了 this 类似 post 但他使用的是 stateNotifier。这看起来更复杂，我只是想通过一个简单的演示来学习 riverpod...

我尝试过的一切都没有奏效。我尝试在屏幕文件中创建一个新的全局提供程序，但什么也没做。尝试改变我在消费者中初始化手表的方式，但没有任何改变。我已经验证过，似乎我正在按照文档中的说明做所有事情 here。我不明白为什么这行不通。感谢任何帮助和指点！

屏幕：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';
import 'package:linechart/date_range_widget.dart';
import 'package:linechart/linechart.dart';

class LineChartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Consumer(builder: (context, watch, child) {
            final startDate = watch(dateController);
            final endDate = watch(dateController);

            final formStart = DateFormat.yMMMd().format(startDate.startDate);
            final formEnd = DateFormat.yMMMd().format(endDate.endDate);

            print(context.read(dateController).startDate);
            print(context.read(dateController).endDate);

            return Text('INCOME GRAPH --- $formStart - $formEnd');
          }),
          backgroundColor: Colors.lightBlue,
          actions: [DateRangeWidget()]),
      body: Column(
        children: [
          SafeArea(
            child: Center(
                child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: LineChart(),
            )),
          ),
        ],
      ),
    );
  }
}

小部件

import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
import 'package:flutter_riverpod/flutter_riverpod.dart';

final dateController = Provider((ref) => DatePickModel());

class DateRangeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        color: Colors.white,
        icon: Icon(Icons.calendar_today),
        onPressed: () async {
          final List<DateTime> picked = await DateRangePicker.showDatePicker(
              context: context,
              initialFirstDate: context.read(dateController).startDate,
              initialLastDate: context.read(dateController).endDate,
              firstDate: DateTime(2015),
              lastDate: DateTime(DateTime.now().year + 2));
          if (picked != null && picked.length == 2) {
            context.read(dateController).setDates(picked.first, picked.last);
          }
        });
  }
}

class DatePickModel extends ChangeNotifier {
  DateTime _startDate = DateTime.now().subtract(Duration(seconds: 7));
  DateTime _endDate = DateTime.now();

  DateTime get startDate => _startDate;
  DateTime get endDate => _endDate;

  void setDates(DateTime startDate, DateTime endDate) {
    _startDate = startDate;
    _endDate = endDate;
    notifyListeners();
  }

  void resetDates() {
    _startDate = DateTime.now().subtract(Duration(seconds: 7));
    _endDate = DateTime.now();
    notifyListeners();
  }
}

编辑：还尝试将小部件放入单独的 ConsumerWidget 中，但不行...

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:linechart/date_range_widget.dart';
import 'package:linechart/linechart.dart';

class LineChartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: AppBarTitle(),
          backgroundColor: Colors.lightBlue,
          actions: [DateRangeWidget()]),
      body: Column(
        children: [
          SafeArea(
            child: Center(
                child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: LineChart(),
            )),
          ),
        ],
      ),
    );
  }
}

class AppBarTitle extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    context.read(dateController).formatDates();
    final formStart = watch(dateController).startFormatted;
    final formEnd = watch(dateController).endFormatted;
    return Text('INCOME GRAPH --- $formStart - $formEnd');
  }
}

Answer 1

您需要将 Provider 的类型更改为 ChangeNotifierProvider。

常规提供者在 notifyListeners 被调用时不知道要更新，因为它没有订阅提供的值。

final dateController = ChangeNotifierProvider((ref) => DatePickModel());

消费者未使用 riverpod ChangeNotifier 重建 UI

Consumer not rebuilding UI using riverpod ChangeNotifier

consumer

dart

flutter

riverpod