Issue
I want to create DropDownButton with changenotifierProvider in Riverpod, but i can not write nicely my code. Please help me. I suppose, i just wrote ‘watch’ method, but i do not know how to read it. So, it should show the item which is chosen, and also it should be update with provider.Category.
My DropDownButton code is here:
Widget dropdownButton(BuildContext context,watch) {
String constantValue = "League Of Legends";
final postProvider = ChangeNotifierProvider<PostProvider>((ref) => PostProvider());
final provider = watch(postProvider);
return Consumer(
builder: (context, watch, _) {
return DropdownButton(
value: provider.postCategory ?? constantValue,
onChanged: (newValue) {
provider.postCategory = newValue;
},
items: <String>["League Of Legends", "Steam", "Csgo"]
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
onTap: () => value,
value: value ?? constantValue,
child: Text(value ?? constantValue),
);
}).toList());
},
);
}
Here my DropDownButton Image: ( when i choose any item of the list, it can not work properly. It always pick the first one (It picks "League of Legends").
I select steam but card categoty shows League of legends
Solution
final postProvider =
ChangeNotifierProvider<PostProvider>((ref) => PostProvider());
class PostProvider extends ChangeNotifier {
String _postCategory;
String get postCategory => _postCategory;
categoryOnChanged(String value) {
if (value.isEmpty) {
return _postCategory;
}
_postCategory = value;
print(_postCategory);
return notifyListeners();
}
}
class DropDownPage extends StatefulWidget {
@override
_DropDownPageState createState() => _DropDownPageState();
}
class _DropDownPageState extends State<DropDownPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dropdown Riverpod issue"),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: _DropDownWidgetConsumer(),
),
),
);
}
}
class _DropDownWidgetConsumer extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final category = watch(postProvider).postCategory;
return DropdownButton(
hint: Text("Choose category"),
value: category,
items: <String>["League Of Legends", "Steam", "Csgo"]
.map((e) => DropdownMenuItem<String>(
onTap: () => e,
value: e ?? category,
child: Text(e ?? "$category"),
))
.toList(),
onChanged: (value) {
context.read(postProvider).categoryOnChanged(value);
},
);
}
}
Answered By – Daniel Aidoo
Answer Checked By – Mildred Charles (FlutterFixes Admin)