Home > Blockchain >  Flutter | Pass value from child to parent
Flutter | Pass value from child to parent

Time:03-14

I need a DropdownButton with items depending on another DropdownButton. Sounds a bit confusing but it isnt. Here is my code with comments at the important parts in order to understand my intention.

Parent

class Parent extends StatefulWidget {
  const Parent({ Key? key }) : super(key: key);

  @override
  State<Parent> createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: 500,
        height: 500,
        child: Column(
          children: const [
            // Main
            DropDownWidget(collection: "MainCollection",),
            // Depending
            DropDownWidget(collection: ""), // Collection should equals value from Main DropDownWidget
          ],
        ),
      ),
    );
  }
}

Child

class DropDownWidget extends StatefulWidget {
  final String collection;
  const DropDownWidget({Key? key, required this.collection}) : super(key: key);

  @override
  State<DropDownWidget> createState() => _DropDownWidgetState();
}

class _DropDownWidgetState extends State<DropDownWidget> {
  var selectedItem;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance
            .collection(widget.collection)
            .snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData || snapshot.hasError) {
            return const CircularProgressIndicator();
          } else {
            var length = snapshot.data?.docs.length;
            List<DropdownMenuItem<String>> items = [];
            for (int i = 0; i < length!; i  ) {
              DocumentSnapshot snap = snapshot.data!.docs[i];
              items.add(DropdownMenuItem(
                child: Text(snap.id),
                value: snap.id,
              ));
            }
            return DropdownButtonFormField<String>(
                onChanged: (value) {
                  setState(() {
                    selectedItem = value;
                    // ********************
                    // PASS value TO PARENT
                    // ********************

                  });
                },
                value: selectedItem,
                items: items);
          }
        });
  }
}

When the Main DropdownButton changes its value, it should pass that to my parent in order to change the focused collection of my depending DropdownButton. I already solved that problem by throwing all the code in one class buts that not the way I want to go. So maybe you can help me out :) Thanks

CodePudding user response:

Create an argument ValueChanged<String> onSelectItem in your child. Call the method when the value changes.

Then in your parent, you provide a function that needs to be called when the value changes in your child.

  • Related