How can I change the dialog? (flutter)

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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