Develop Reference

Is there a way to use the same globalkey in multiple widgets?? in flutter

So I'm relatively new to flutter and I've been trying to dynamically add Sections(TextFormFields) that are represented in a form that has Form.Helper as its child and in the process to get the saveAndValidate method to work i had to use a GlobalKey to be able to access the currentState of its so i can validate and save user input and such, but whenever i try add another Section to the screen it display this error massage
════════ Exception caught by widgets library ═══════════════════════════════════
Multiple widgets used the same GlobalKey.
════════════════════════════════════════════════════════════════════════════════
here is the code I wrote and I'd appreciate any help in solving this error please.
#1- the code for the model I used:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class AddCourse with ChangeNotifier {
String? sectionName;
List<String>? sections;
List<dynamic>? addVids;
AddCourse({this.sectionName, this.sections, this.addVids});
/*where we save our values later to push them to firbase/database*/
Map<String, dynamic> toJson() {
final Map<String, dynamic> sectionData = <String, dynamic>{};
sectionData['Section #'] =
sections; // where current section number is saved and is stored dynamicly and updates as user adds more or less sections.
sectionData['Section Name'] =
sectionName; // where the input of the textformfield is saved and to be later pushed to the database and also is stored in a list so it can hold multiple section names as such.
return sectionData;
}
/* this is another model data for a functionality thats not implemented yet*/
Map<dynamic, dynamic> toJson2() {
final Map<dynamic, dynamic> vidData = <dynamic, dynamic>{};
vidData['Videos #'] = addVids;
return vidData;
}
}
#2 this the code for the form I created
import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/FormHelper.dart';
import '../provider/course_add_model.dart';
class CourseCardBody extends StatefulWidget {
const CourseCardBody({
Key? key,
}) : super(key: key);
#override
State<CourseCardBody> createState() => _CourseCardBodyState();
}
class _CourseCardBodyState extends State<CourseCardBody> {
/* this is where i set up my global key that has the type of GlobalKey<FormState>*/
/*State associated with a [Form] widget. such as textformfields/forms/textfields..etc// the use of the (FormState) is to be able to Access the Functions "save"/"validate"/"reset" as to use them with forms/textformfields that you want to validate thier input or save it*/
GlobalKey<FormState> globalkey = GlobalKey();
AddCourse coursesModel = AddCourse();
#override
void initState() {
super.initState();
coursesModel.sections = List<String>.empty(growable: true);
coursesModel.sections?.add("");
// adds empty sections to the list of sections when the add button is used
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Add Courses'),
centerTitle: true,
),
body: ListView.separated(
shrinkWrap: true,
physics: const ScrollPhysics(),
itemBuilder: ((context, index) => Column(
children: [
_uiWidget(index),
Center(
// the submit button here needs some work to only be show once but for now sorry for this annoying button.
child: FormHelper.submitButton('Save', () {
if (validateAndSave()) {
print(coursesModel.toJson());
}
}),
),
],
)),
separatorBuilder: ((context, index) => const Divider()),
itemCount: coursesModel.sections!.length,
),
);
}
Widget _uiWidget(index) {
/* this form here is the parent of form fields/Formhelper widgets as seen below*/
return Form(
/* -- note here--
if we use a UniqueKey()
instead of our globalkey
here and comment the ValidateAndSave() function here
the form will work in terms of adding and removing sections
but we won't be able to either
save content/input of the user in the fields or
either validate
them so that sucks. */
/*this form is where global key is first used*/
key: globalkey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_sectionsContainer(index),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
flex: 1,
fit: FlexFit.loose,
child: FormHelper.inputFieldWidgetWithLabel(
context,
'Add Section$index',
'',
'Section Title',
(onValidate) {
if (onValidate.isEmpty) {
return 'section ${index + 1} name cant be empty';
}
return null;
},
(onSavedVal) {
coursesModel.sections![index++] = index.toString();
onSavedVal = index;
},
onChange: (onChangedval) {
coursesModel.sectionName = onChangedval;
},
initialValue: coursesModel.sectionName ?? "",
borderColor: Colors.black,
borderFocusColor: Colors.black,
fontSize: 14,
labelFontSize: 14,
validationColor: Colors.redAccent,
),
),
Visibility(
visible: index == coursesModel.sections!.length - 1,
child: IconButton(
onPressed: () {
addEmailControl();
},
icon: const Icon(
Icons.add_circle,
color: Colors.greenAccent,
),
),
),
Visibility(
visible: index > 0,
child: SizedBox(
width: 35,
child: IconButton(
onPressed: () {
removeEmailControl(index);
},
icon: const Icon(
Icons.remove_circle,
color: Colors.redAccent,
),
),
),
),
],
),
],
),
),
);
}
Widget _sectionsContainer(index) {
/* the widget used to create the current section displayed on the top left of each textformfields*/
return Column(
children: [
Padding(
padding: const EdgeInsets.all(10),
child: Text(
'Section ${index + 1}',
textAlign: TextAlign.left,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
],
);
}
void addEmailControl() {
setState(() {
coursesModel.sections!.add('');
});
}
void removeEmailControl(index) {
setState(() {
if (coursesModel.sections!.length > 1) {
coursesModel.sections!.removeAt(index);
}
});
}
bool validateAndSave() {
/* we're especially using the <FormState> that is provided by the Globalkey to be able access the currentState of widget/form that has the global key in order to either validate or save the textformfields input or both in the same time*/
// validate each form
if (globalkey.currentState!.validate()) {
// If all data are correct then save data to out variables
// save each form
globalkey.currentState!.save();
return true;
} else {
return false;
}
}
}
I'm trying my best to figure it out on my own as I want to know how to solve this problem properly and where did I go wrong, and any help is very much appreciated thank you!

I suggest to create List<GlobalKey> variable. When you dynamically add or delete sub forms, you add or remove list items accordingly. It is impossible to use same GlobalKey for multiple widgets. So you need to create separate GlobalKeys for each form.

You may create a file of Global variables that may be shared across multiple files to ensure you are using a single instance.
Example globals.dart file
GlobalKey<SomeState> myGlobalKey = GlobalKey<SomeState>();
Example of implementation inside main.dart (or whatever file)
import './[path-to-globals]/globals.dart' // enter the appropriate path for your project
... // some code
Form(
key: myGlobalKey,
... // code
)
... // maybe more code

hi why my list item turn null in the futurebuilder of flutter?

Hi in my flutter app have FutureBuilder that return listview, my list listview create some button for update the hive table. when I click the first time on one of buttons everything is run smoothly, but when I click on same button again my hive key turn to null and program show my this error: "type 'Null' is not a subtype of type 'int' "
I write print all over my code but still I do not get it why the key turn null from the second time.
How can I Correct this? please help my.
my Futurebuilder body is:
FutureBuilder<List>(
future: controller.showTaskList(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return SizedBox(
height: Get.height,
child: const Center(
child: CircularProgressIndicator(),
),
);
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
List data = snapshot.data ?? [];
return ListView.separated(
scrollDirection: Axis.vertical,
physics:
const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
// controller.taskIconCheckList
// .clear();
for (int i = 0;
i < data.length;
i++) {
if (data[i].status == true) {
controller.taskIconCheckList
.add(true.obs);
} else {
controller.taskIconCheckList
.add(false.obs);
}
}
return ListTile(
leading: Obx(
() => PageTransitionSwitcher(
transitionBuilder: (
child,
primaryAnimation,
secondaryAnimation,
) {
return SharedAxisTransition(
animation:
primaryAnimation,
secondaryAnimation:
secondaryAnimation,
transitionType:
SharedAxisTransitionType
.horizontal,
fillColor:
Colors.transparent,
child: child,
);
},
duration: const Duration(
milliseconds: 800),
child: controller
.taskIconCheckList[
index]
.value
? SizedBox(
child: IconButton(
icon: const Icon(
Icons
.check_circle_rounded,
color: Colors
.lightGreenAccent,
),
onPressed: () {
controller
.functionTaskIconCheckList(
index,
);
print('طول دیتا');
print(data.length.toString());
print('مقدار ایندکس');
print(index.toString());
print('مقدار کلید');
print(data[index].key.toString());
print(data[index].taskText.toString());
controller
.updateStatusTask(
index,
data[index]
.key); // here when i first click // return key currectly, but after that show null and updatestatusetask not run and show error.
},
),
)
: IconButton(
onPressed: () {
controller
.functionTaskIconCheckList(
index,
);
print('طول دیتا');
print(data.length.toString());
print('مقدار ایندکس');
print(index.toString());
print('مقدار کلید');
print(data[index].key.toString());
print(data[index].taskText.toString());
controller
.updateStatusTask(
index,
data[index]
.key); // here when i first click // return key currectly, but after that show null and updatestatusetask not run and show error.
},
icon: const Icon(
Icons
.radio_button_unchecked_outlined,
color: Colors.red,
),
),
),
),
title: Text(data[index].taskText,
style: normalTextForCategory),
subtitle: Text(
data[index]
.date
.toString()
.substring(0, 10),
textDirection:
TextDirection.ltr,
textAlign: TextAlign.right,
style: normalTextForSubtitle,
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
onPressed: () {
myDefaultDialog(
'هشدار',
'آیا از حذف این گزینه اطمینان دارید؟',
'بله',
'خیر',
() {
Get.back();
mySnakeBar(
'',
'گزینه مورد نظر با موفقیت حذف شد.',
Icons
.warning_amber_rounded,
Colors.yellow);
},
);
},
icon: const Icon(
Icons.delete),
color: Colors.redAccent,
),
IconButton(
onPressed: () {
Get.offNamed(
Routs.editTaskScreen,
arguments: 'edit');
},
icon: const Icon(
Icons.edit_calendar,
color:
Colors.yellowAccent,
),
),
],
),
);
},
separatorBuilder:
(BuildContext context,
int index) {
return const Divider(
height: 2,
color: Colors.white70,
);
},
);
}
}
},
),
this is my functionTaskIconCheckList form controller:
functionTaskIconCheckList(int index) {
taskIconCheckList[index].value = !taskIconCheckList[index].value;}
and this the updatestatusetask function
updateStatusTask(int index,int taskKey) async {
print('در تابع آپدیت ایندکس هست: ${index.toString()}');
print('در تابع آپدیت کی هست: ${taskKey.toString()}');
var taskBox = await Hive.openBox('task');
var filterTask = taskBox.values.where((task) => task.key == taskKey).toList();
Task task = Task(
filterTask[0].taskText,
filterTask[0].date,
taskIconCheckList[index].value,
filterTask[0].deleteStatus,
null,
null,
filterTask[0].taskCatId,
filterTask[0].userId);
await taskBox.put(taskKey, task);}
and this is my showtasklist function:
Future<List> showTaskList() async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
var taskBox = await Hive.openBox('task');
var filterTask = taskBox.values
.where((task) => task.userId == sharedPreferences.getInt('key'))
.toList();
return filterTask;}
this is my model:
#HiveType(typeId: 2)
class Task extends HiveObject{
#HiveField(0)
String taskText;
#HiveField(1)
DateTime date;
#HiveField(2)
bool status;
#HiveField(3)
bool deleteStatus;
#HiveField(4)
int taskCatId;
#HiveField(5)
int userId;
#HiveField(6)
User? user;
#HiveField(7)
TaskCat? taskCat;
Task(this.taskText, this.date, this.status, this.deleteStatus, this.user,
this.taskCat, this.taskCatId, this.userId);
}

One possible solution would be to wait for the Future function to finish and then load the list. If it tries to load the list early before finishing up the Future function, it might presume the value to be null.
Hope this helps.

Still I do not know what is cause this problem, But I found an alternative temporary solution. I create temporary Int list. then just before the return listTile in the futureBuilder body, I write the Loop and save all of the key in that list. finally instead of pass the "data[index].key." I pass my key from that temporary Int list. so everything work fine now
this is my part of code change from before, but still I want know main solution.
return ListView.separated(
scrollDirection: Axis.vertical,
physics:
const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
// controller.taskIconCheckList
// .clear();
for (int i = 0;
i < data.length;
i++) {
Get.find<
HomeScreenController>()
.taskKey.add(data[i].key);
if (data[i].status == true) {
Get.find<
HomeScreenController>()
.taskIconCheckList
.add(true.obs);
} else {
Get.find<
HomeScreenController>()
.taskIconCheckList
.add(false.obs);
}
}
return ListTile(

Flutter Page Not Updating Upon Exiting The Page

I am trying to make a product management application. In this application, I divided the products into categories. And in order to reach the products, it is necessary to choose a category from the main page.
I'm saving the user-selected category with GetX and on the Listing Products page, I'm trying to list the products by making a category filter from Firebase Firestore.
But I am having a problem. When the application is opened, when any category is entered, the products of the category entered normally are listed. But when you leave the product listing page and enter a different page, the list of the first entered product is displayed.
My guess is that the source of this problem is the page not refreshing. Can you help me to solve this problem?
Codes:
HomePage.dart(page listing product categories):
return ListTile(
leading: Categories[index].icon,
title: Text(Categories[index].name, style: TextStyle(fontSize: 18, fontFamily: "Montserrat"),),
onTap: () {
if (Categories[index].name == "Meyve & Sebze") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Meyve & Sebze", "FruitAndVegetable"];
// Item 0 of the list is for the AppBar on the product listings page. The 1st item of the list is to be able to filter category from Firebase Firestore.
Get.to(ProductsPage());
}
else if (Categories[index].name == "Fırın") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Fırın", "Bakery"];
Get.to(ProductsPage());
}
else if (Categories[index].name == "Temel Gıda") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Temel Gıda", "Food"];
Get.to(ProductsPage());
}
else if (Categories[index].name == "Süt Ürünleri") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Süt Ürünleri", "DairyProducts"];
Get.to(ProductsPage());
}
else if (Categories[index].name == "Atıştırmalık") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Atıştırmalık", "Snacks"];
Get.to(ProductsPage());
}
else if (Categories[index].name == "Su & içecek") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Su & içecek", "Waters"];
Get.to(ProductsPage());
}
else if (Categories[index].name == "Teknoloji") {
_temporaryHoldOfInformation.temporaryInformationProducts.value = ["Teknoloji", "Tech"];
Get.to(ProductsPage());
}
},
);`
temporary_hold_of_information.dart (To keep user selected category from HomePage.dart - GetX):
import 'package:get/get.dart';
class TemporaryHoldOfInformation extends GetxController {
RxList temporaryInformationProducts = RxList([]);
}
ProducsPage.dart:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:market_cebimde/paginations/temporary_hold_of_information.dart';
class ProductsPage extends StatefulWidget {
#override
State<ProductsPage> createState() => _ProductsPageState();
}
TemporaryHoldOfInformation _temporaryHoldOfInformation = Get.put(TemporaryHoldOfInformation());
String _productName = _temporaryHoldOfInformation.temporaryInformationProducts.value[0];
String _productCategory = _temporaryHoldOfInformation.temporaryInformationProducts.value[1];
FirebaseFirestore _firestore = FirebaseFirestore.instance;
FirebaseAuth _auth = FirebaseAuth.instance;
class _ProductsPageState extends State<ProductsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueAccent[700],
title: Text("${_productName.toString()}", style: const TextStyle(color: Colors.white),),
centerTitle: true,
elevation: 0,
),
body: SingleChildScrollView(
child: Column(
children: [
StreamBuilder(
stream: _firestore.collection("products").where("category", isEqualTo: _productCategory).snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
return Container(
child: Column(
children: [
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(snapshot.data!.docs[index].data()["productImageLink"]),
fit: BoxFit.cover,
),
),
),
Text(snapshot.data!.docs[index].data()["productName"]),
Text(snapshot.data!.docs[index].data()["productCost"]),
Text(snapshot.data!.docs[index].data()["category"]),
Text(snapshot.data!.docs[index].data()["productWeight"]),
],
),
);
},
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
],
),
),
);
}
}
The page that is selected in HomePage.dart, saved with GetX, filtered in Firebase Firestore by category, and the products are listed. The problem is on this page. When you exit-enter the page, the products of the category entered are listed, not the products of the entered category. So the page is not updating.
I have to restart the application for the products according to the selected category to arrive.
I would be glad if you help. Thanks in advance for your help :)

On a Flutter widget this dart error comes - Expected a value of type 'List<DropdownMenuItem<String>>', but got one of type 'List<dynamic>'

I am very new to flutter. I am trying to create List view with Dynamically generated DropDownButton & And Label .No matter what I do this error occurs and dropdown items not updating.
Expected a value of type 'List<DropdownMenuItem<String>>', but got one of type 'List<dynamic>'
This is my listview builder code
ListView.builder(
itemCount: tasksLength,
itemBuilder: (context, index) {
String roleId = taskRoles[index]['roleId'];
List<DropdownMenuItem<String>> _userList = [DropdownMenuItem<String>(value: '', child: Text('Loading..'))].toList();
if (usersList['roles'] != null && usersList['roles'][roleId] != null) {
_userList = usersList['roles'][roleId]['users'].map((item) {
return DropdownMenuItem<String>(value: item['id'],child: Text(item['name'].toString()));
}).toList();
}
return UserSelect(userList: _userList);
},
),
This is my widget class with the DropDownbutton
class UserSelect extends StatefulWidget {
List<DropdownMenuItem<String>>? userList =
[DropdownMenuItem<String>(value: '', child: Text('Loading..'))].toList();
UserSelect({this.userList});
#override
_UserSelectState createState() => _UserSelectState();
}
class _UserSelectState extends State<UserSelect> {
String _selected_user = '';
String _roleName = 'User Role';
List<DropdownMenuItem<String>> _userList =
[DropdownMenuItem<String>(value: '', child: Text('Loading..'))].toList();
#override
void initState() {
super.initState();
}
#override
void didUpdateWidget(UserSelect oldWidget) {
if (oldWidget.userList != widget.userList) {
_userList = widget.userList!;
}
super.didUpdateWidget(oldWidget);
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Text(
_roleName,
style: TextStyle(
fontFamily: 'Bilo',
fontSize: 16,
color: const Color(0xff3b3e51),
letterSpacing: 0.224,
height: 1.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18.0),
color: const Color(0xfff6f6f6),
),
child: DropdownButton<String>(
isExpanded: true,
value: (_selected_user.length > 0) ? _selected_user : null,
icon: const Icon(Icons.keyboard_arrow_down),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.black45),
hint: new Text("Select User"),
underline: Container(
height: 2,
color: Colors.white24,
),
onChanged: (String? newValue) {
setState(() {
_selected_user = newValue!;
});
},
items: _userList),
)
],
);
}
}
Some of codes unnecessary I tried by best to skip this error that is why some junk codes are there.
Please help me to fix this issue or show me right direction.

I think the issue here is the .toList(); method calls here:
List<DropdownMenuItem<String>> _userList =
[DropdownMenuItem<String>(value: '', child: Text('Loading..'))].toList();
toList() in dart returns a list with the type that's supplied to its type parameter. Documentation
When not supplied with a type parameter, I would assume that the toList() method's return type is dynamic.
You can just remove the toList() method call altogether, as you already placed the DropDownMenuItem into a list by placing it between the [square brackets]! Ironically, the type would've been inferred by the list declaration before you overwrote it with toList() and made it dynamic :')
If you DO need to do it this way, you can simply add [items ...].toList<DropdownMenuItem>() which will correctly return a list of type DropdownMenuItem :)

Flutter issue: DropDown in ListView.Builder

i am getting values from server to dropdown which are inserted previous from static list of dropdown values, but i need to use dropdown when value from server is 'Pending' to update specific record, below my code.
List<String> approvalList = ['Pending', 'Approve', 'Discard'];
String dropdownValue="Pending";
Container(
height: MediaQuery.of(context).size.height*0.3,
width: MediaQuery.of(context).size.width,
child:StreamBuilder<List<ApprovalModel>>(
stream: bloc.approvalsStream,
initialData: [],
builder: (context, snapshot) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context,i){
return snapshot.connectionState==ConnectionState.waiting?Lottie.asset(
'assets/lottieloading.json',
width: 70,
height: 70,
fit: BoxFit.fill,
):ListTile(
title: Text(snapshot.data![i].approverName),
trailing: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return DropdownButton<String>(
value: snapshot.data![i].status==0?'Pending':
snapshot.data![i].status==1?'Approve':
'Discard',
items: approvalList.map((String val) {
return DropdownMenuItem<String>(
value: val,
child: new Text(val),
);
}).toList(),
hint: Text(selectedValue),
onChanged: (val) {
setState(() {
dropdownValue = val!;
});
});
}
),
);
});
}
)
,
),
As You see i am setting value from server it is working fine, but when the value is pending i want to use the dropdown to update record in database.

At onChanged when you update your dropdownValue , also call the method you are using to update record in database.