The dialog widget is stateless widget, so I Thought I could make the Dialog to Stateful widget by using statefulbuilder. So I made the code like this

import 'package:flutter/material.dart';

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

  @override
  State<TestDialog> createState() => _TestDialogState();
}


class _TestDialogState extends State<TestDialog> {
  int i=0;
  Future<void> showpopup (context) async {
    showDialog(
        context: context,
        builder: (context){
          return Dialog(
            child: StatefulBuilder(builder: (BuildContext context, StateSetter setstate){
              return Column(
                children: [
                  Row(
                    children: [
                      GestureDetector(
                        child: Container(
                            child : Text(i.toString())
                        ),
                        onTap: (){
                          setState(() {
                            i  ;
                          });
                        },
                      )
                    ],
                  )
                ],
              );
            }),
          );
        }
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('stateful dialog'),
      ),
      body: Column(
        children: [
          GestureDetector(
            child: Text('yeah'),
            onTap: (){
              showpopup(context);
            },
          )
        ],
      ),
    );
  }
}

but in the dialog, the number doesn't change. After I close the dialog and open again, now it shows the change. How can I use statefulbuilder properly? Or is statefulbuilder not valid on this code?

I tried the Future<void> to void but it is as same as first.

CodePudding user response：

You can make your code work with only a single letter change.

  setState(() {
    i  ;
  });

to

  setstate(() {
    i  ;
  });

When using a StatefulBuilder you need to use the provided StateSetter to indicate state changes in there. Although it feels to me like an overcomplicated way to do what you want.

CodePudding user response：

you've called setState instead of calling setstate. In your stateful builder you have named your StateSetter setstate and that's the function you need to call to update your dialog

CodePudding user response：

You need to create one temp variable. and change the value for that variable. Same as below

int i=0;
Future<void> showpopup (context) async {
    showDialog(
        context: context,
        builder: (context){
          return Dialog(
            child: StatefulBuilder(builder: (BuildContext context, StateSetter setstate){
              int temp = i;
              return Column(
                children: [
                  Row(
                    children: [
                      GestureDetector(
                        child: Container(
                            child : Text(temp.toString())
                        ),
                        onTap: (){
                          setState(() {
                            temp   ;
                          });
                        },
                      )
                    ],
                  )
                ],
              );
            }),
          );
        }
    );
  }