How to Pass data from showmodalbottomsheet to Previous Page in Flutter-CodePudding

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'))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Try to change this line:

builder: (BuildContext context, setState) {

with this line

builder: (BuildContext context, StateSetter setStateModal) {

The idea is to setState( ) of widgets outside your showModalBottomSheet

Let me know if this did not help.

CodePudding user response：

@Canada2000's answer is ok. I'm just extending it.
The use StatefulBuilder inside showDialog() or showModalBottomSheet() ... is these widgets are separated from current context tree.

We use StatefulBuilder when we like to show changes on dialogs. StatefulBuilder has its own state⇾ builder: (BuildContext context, setState) and calling setState is using StatefulBuilder's setstate.

Now let's say you want to change both UI, to do that you need to simply rename StatefulBuilder's state to something like SBsetState inside builder as @Canada2000 said.

to update the _TestPageState use setState((){})
to update on dialog UI, use StatefulBuilder's state like SBsetState((){})

You may can simple ignore StatefulBuilder if you don't want to show any changes on dialog.

Your widget

import 'package:flutter/material.dart';

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("text Result ${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, setStateBTS) {
                          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'))
              ],
            ),
          ),
        ),
      ),
    );
  }
}