Search code examples
flutterdartflutter-showmodalbottomsheet

How to Pass data from showmodalbottomsheet to Previous Page in Flutter


How i pass data from showmodalbottomsheet to previous page. Below is the sample code, what i have tried is there is a button when i click it displays modalbottomsheet and when i click on Done button it should pass 1 value to previous page and also i have added setState on onTap press but still it is not changing on previous page unless i click on Flutter Hot Reload. How to solve this issue?

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

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  String textResult = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(textResult),
                TextButton(
                    onPressed: () {
                      showModalBottomSheet(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                topRight: Radius.circular(24.0),
                                topLeft: Radius.circular(24.0))),
                        context: context,
                        builder: (_) => StatefulBuilder(
                            builder: (BuildContext context, setState) {
                          return Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      GestureDetector(
                                        onTap: () {
                                          setState(() {
                                            textResult = "1";
                                          });
                                          Navigator.pop(context);
                                        },
                                        child: Text(
                                          'Done',
                                          style: TextStyle(
                                              color: Colors.red,
                                              fontWeight: FontWeight.bold),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          );
                        }),
                      );
                    },
                    child: Text('Press'))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Solution

  • Try to change this line:

    builder: (BuildContext context, setState) {
    

    with this line

    builder: (BuildContext context, StateSetter setStateModal) {
    

    Explanation: The outer widget in the build (Scaffold and its content) and the widget inside the showModalBottomSheet have different setState( ). You have to make sure you call the outer one when you need to update parts of that widget. The idea is to setState( ) of widgets outside your showModalBottomSheet. To be able to do that, you can give the two setState() different names so you know which one you are calling: StateSetter setStateModal