Why StatefulWidget doesn't update when setState called?


I’m writing a program that uses floatingActionButton.
When OriginFloatingActionButton() called, showDialog() is called in the method.

Profile calls first.

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

  _Profile createState() => _Profile();

class _Profile extends State<Profile> {
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: OriginFloatingActionButton(),

Below code is showing floatingActionButton, and show dialog when it pushed.
In this dialog, when ElevatedButton pushed, add strings list element with setState.
However amount of element in ListView.builder isn’t updated.
When I close dialog and re-open it, it updated.
How can I update ListView.builder when push ElevatedButton.

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

  _OriginFloatingActionButton createState() => _OriginFloatingActionButton();

class _OriginFloatingActionButton extends State<OriginFloatingActionButton> {
  List<String> strings = <String>[
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.only(bottom: 30.0, right: 30),
        width: 140,
        height: 55,
        child: SingleChildScrollView(
          child: FloatingActionButton.extended(
            label: const Text("Post"),
            icon: const Icon(Icons.add),
            backgroundColor: Colors.blue,
            foregroundColor: Colors.white,
            onPressed: () {
                  context: context,
                  builder: (BuildContext context) {
                    return Dialog(
                        elevation: 16,
                        child: Container(
                          height: 700,
                          width: 500,
                          child: Center(
                            child: Column(
                              children: <Widget>[
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                          width: 300,
                                          child: Expanded(
                                              child: ListView.builder(
                                                  shrinkWrap: true,
                                                      (BuildContext context,
                                                          int index) {
                                                    return TextField(
                                                      decoration: InputDecoration(
                                                          label: Text(
                                                              "Artist Name " +
                                                              const OutlineInputBorder()),
                                      const SizedBox(
                                        width: 5,
                                        child: const Icon(Icons.add),
                                        style: ElevatedButton.styleFrom(
                                            primary: Colors.white,
                                            onPrimary: Colors.black,
                                            shape: const CircleBorder(
                                                side: BorderSide(
                                                    color: Colors.black,
                                                    width: 1,
                                                    style: BorderStyle.solid))),
                                        onPressed: () {
                                          setState(() {
                                            if (mounted) {

Is this because that I call OriginFloatingActionButton() in floatingActionButton:?
So far no errors have occurred.
How can I update the ListView without refreshing the Dialog?


Use StatefulBuilder to use setState inside Dialog

  context: context,
  builder: (context) {
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
              onPressed: () {
                setState(() {
                  ///this will update 
              child: Text("Change"),

Answered By – Mofidul Islam

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *