This is my FloatingActionButton

floatingActionButton: FloatingActionButton(
        onPressed: () {
          _bottomSheet(context);
        },
        child: const Icon(Icons.add),
      ),

When i click the button it will call _bottomSheet function which have showModalBottomSheet.

void _bottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        elevation: 2,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        isScrollControlled: true,
        builder: (BuildContext buildcontext) {
          return Container(
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.all(15),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const TextField(
                  decoration: InputDecoration(
                    icon: Icon(LineAwesomeIcons.search),
                    border: OutlineInputBorder(),
                    labelText: 'Filter',
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Add Things'),
                    IconButton(
                      icon: AnimatedIcon(
                          icon: AnimatedIcons.list_view, progress: controller),
                      onPressed: toggleIcon,
                    )
                  ],
                ),
                Container(
                  width: double.maxFinite,
                  height: MediaQuery.of(context).size.height * 0.75,
                  child: isList ? ButtonList() : ButtonGrid(),
                ),
              ],
            ),
          );
        });
  }

Controller & toggleicon

 //controller
 late AnimationController controller;
  bool isList = false;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

//toggleicon
void toggleIcon() => setState(() {
    isList = !isList;
    isList ? controller.forward() : controller.reverse();
  });

When i click on the AnimatedIcon its toggle the icon by calling above toggleIcon() fuction. but at the same time i want to change child property of container widget without rebuilding parent component. So, how do i get this functionlity.

CodePudding user response：

You need to use StatefulBuilder to update the UI inside showModalBottomSheet()

  void _bottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        elevation: 2,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        isScrollControlled: true,
        builder: (BuildContext buildcontext) {
          return StatefulBuilder(
            builder: (context, setStateSB) => Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(15),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const TextField(
                    decoration: InputDecoration(
                      // icon: Icon(LineAwesomeIcons.search),

                      border: OutlineInputBorder(),
                      labelText: 'Filter',
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Add Things'),
                      IconButton(
                        icon: AnimatedIcon(
                            icon: AnimatedIcons.list_view,
                            progress: controller),
                        onPressed: () {
                          toggleIcon();
                          setStateSB(() {}); // this is setstate for inside dialog
                        },
                      )
                    ],
                  ),
                  Container(
                    width: double.maxFinite,
                    height: MediaQuery.of(context).size.height * 0.75,
                    child: isList ? Text("List") : Text("Grid"),
                  ),
                ],
              ),
            ),
          );
        });
  }

You can find more details here