我目前正在使用 Flutter 中的应用程序，并且正在使用 Provider 进行状态管理。我正在使用 ChangeNotifierProvider 的 . AvProvider 是一个类，因为类 AvProvider 扩展了 ChangeNotifier 以打开时间选择器以使用方法选择时间，然后使用 notifyListeners(); 更新并在应用程序中将所选时间显示为文本。
在尝试实现这一点时，我在模拟器屏幕上收到以下错误：
_InheritedProviderScope(value: 'Provider' 的实例，监听值)。
如何让选定的时间显示在计时器图标的正下方？
这是我的模型课。
import 'package:flutter/material.dart';
class AvProvider with ChangeNotifier {
var newTime;
AvProvider (this.newTime);
TimeOfDay _time = TimeOfDay(hour: 7, minute: 15);
dynamic selectTime(context) async {
final TimeOfDay newTime = await showTimePicker(
context: context,
initialTime: _time,
);
if (newTime != null) {
_time = newTime;
}
else{
print("Time is not selected");
}
print(newTime);
return newTime;
}
String get getDisplayText => newTime.toString();
notifyListeners();
}
这是我的屏幕代码的一部分。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:trial/functionality/avProvider.dart';
class AvalPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<AvProvider>(
create: (context) => AvProvider(context),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: Column(
children: <Widget>[
Container(
color: Color(0xFFFFFF),
child: Column(
children: <Widget>[
SizedBox(height: 5),
Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(40),
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.redAccent,
Colors.tealAccent,
],
),
borderRadius:
BorderRadius.circular(10),),
height: 150,
child: Padding(
padding:
const EdgeInsets.all(0.5),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
15), // initially 35
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment
.center,
children: [
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
'MONDAY',
style: TextStyle(
color: Colors.teal
.shade900,
fontFamily: 'Noto_Sans',
fontSize: 17.0,
),
),
SizedBox(
width: 20.0,
),
Icon(
Icons.timer_outlined,
size: 45,
color: Color(0xff40C9B9),
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceAround,
children: <Widget>[
Text(
'Start',
style: TextStyle(
color:
Colors.teal.shade900,
fontFamily: 'Noto_Sans',
fontSize: 15.0,
),
),
//SizedBox(height: 5),
SizedBox(
width: 50.0,
),
ElevatedButton(
child: Icon(
Icons.timer_outlined,
size: 45,
color: Color(
0xff40C9B9),
),
onPressed: () {
Provider.of<
AvProvider>(
context,
listen: false)
.selectTime(
context);
},
),
Text(
'End',
style: TextStyle(
color:
Colors.teal.shade900,
fontFamily: 'Noto_Sans',
fontSize: 15.0,
),
),
//SizedBox(height:5),
],
),
]),
),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 10.0,
),
SizedBox(
width: 50.0,
),
// SizedBox(height: 5),
Expanded(
child: Consumer<
AvProvider>( // <--- Consumer
builder: (context,
avProvider,
_) {
return Provider
.of<AvProvider>(
context)
.getDisplayText ==
null
? Center(
child: CircularProgressIndicator())
:
Text(Provider
.of<AvProvider>(
context)
.getDisplayText,
overflow: TextOverflow
.ellipsis);
//Text('${Provider.of<AvProvider>(context).getDisplayText}', overflow: TextOverflow.ellipsis);
},
),
),
]),
),
],
),
),
),
),
),
),
),
],
),
),
],
),
),
);
}),
);
}
}
在我的代码中，我为开始时间和结束时间保留了两个时间选择器。在这里，我只为 END 时间选择器放置了提供者和消费者。