消费者未使用riverpod ChangeNotificationer重建UI

Question

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

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

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

我所尝试的一切都没有奏效。我尝试在屏幕文件中创建一个新的全局提供者，但没有成功。尝试更改我在消费者中初始化手表的方式，但一无所获。我已经核实了，似乎我正在按照这里的文件所说的做每件事。我不明白为什么这行不通。任何帮助和建议都将不胜感激！

屏幕：

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());