Using set state from a dialog box with StatefulBuilder in flutter

Question

I am trying to make a simple social media app and I am using a alert dialog for the user to add a new post. Im trying to update the alert dialog using statefulBuilder when I add an image but the image only appears if I close the dialog box and then try to make a new post. Here is the code.

Any help would be appreciated and how should I clear the image from the dialog box once complete.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
import 'package:image_picker/image_picker.dart';
import 'package:only_johns_lower_sdk/controllers/auth_controller.dart';
import 'package:only_johns_lower_sdk/controllers/image_controller.dart';
import 'package:only_johns_lower_sdk/controllers/post_controller.dart';
import 'package:only_johns_lower_sdk/views/widgets/only_johns_font.dart';

import '../../widgets/johns_list_view.dart';
import '../../widgets/main_feed.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

//TODO: FIGURE OUT SLIVER LISTS

class _HomeScreenState extends State<HomeScreen> {
  //Access current user
  FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  //access auth and post controller
  AuthController _authController = AuthController();
  PostController _postController = PostController();
  ImageController _imageController = ImageController();

  //TextEditingController
  TextEditingController _postTextEditingController = TextEditingController();

  Uint8List? _postImage;

  void signOut() {
    _authController.signOut();
  }

  void selectImage() {
    showDialog(
      context: context,
      builder: (context) => SimpleDialog(
        title: Text('Add image to post'),
        children: [
          //add from gallery
          SimpleDialogOption(
            child: TextButton(
              onPressed: () async {
                Navigator.of(context).pop();
                final Uint8List? postImage =
                    await _imageController.pickImage(ImageSource.gallery);
                setState(() {
                  _postImage = postImage;
                });
              },
              child: Text('Add image from gallery'),
            ),
          ),

          //add from camera
          SimpleDialogOption(
            child: TextButton(
                onPressed: () async {
                  Navigator.of(context).pop();
                  final Uint8List? postImage =
                      await _imageController.pickImage(ImageSource.camera);
                  setState(() {
                    _postImage = postImage;
                  });
                },
                child: Text('Add image from camera')),
          ),

          //cancel image
          SimpleDialogOption(
            child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Cancel')),
          ),
        ],
      ),
    );
  }

  void createPost() {
    showDialog(
        context: context,
        builder: (context) => StatefulBuilder(
              builder: (context, setState) => AlertDialog(
                title: Text('Create new post'),
                content: Column(
                  children: [
                    _postImage != null
                        ? CircleAvatar(
                            radius: 70,
                            backgroundImage: MemoryImage(_postImage!),
                          )
                        : Container(),
                    TextField(
                      controller: _postTextEditingController,
                      //chaneg to a bigger text field
                      decoration: InputDecoration(
                        hintText: 'Enter post',
                        border: OutlineInputBorder(),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: TextButton.icon(
                        onPressed: selectImage,
                        label: Text('Add image to post'),
                        icon: Icon(Icons.add_a_photo),
                      ),
                    )
                  ],
                ),
                actions: [
                  //post
                  TextButton(
                    onPressed: () async {
                      if (_postTextEditingController.text.isNotEmpty) {
                        await _postController.createPost(
                            message: _postTextEditingController.text);
                        _postTextEditingController.clear();
                        Navigator.pop(context);
                      }
                    },
                    child: Text('Post'),
                  ),
                  //cancel
                  TextButton(
                    onPressed: () {
                      _postTextEditingController.clear();
                      Navigator.pop(context);
                    },
                    child: Text('Cancel'),
                  ),
                ],
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.small(
        shape: CircleBorder(),
        onPressed: createPost,
        child: Icon(
          Icons.add,
        ),
      ),
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          children: [
            // HEADER //This would be better as an appbar but leaving it for future reference as it took fucking ages
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const OnlyJohnsFont(
                  onlyTextColor: Colors.white,
                ),
                Row(
                  children: [
                    ElevatedButton.icon(
                      style: ElevatedButton.styleFrom(
                        shape: const CircleBorder(),
                        iconColor: Colors.grey,
                        backgroundColor: Colors.grey.shade800,
                      ),
                      onPressed: signOut,
                      label: const Icon(
                        Icons.logout,
                        size: 20,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            //const SizedBox(height: 20),
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverPadding(
                    padding:
                        const EdgeInsets.only(top: 15, left: 15, right: 15),
                    sliver: SliverList(
                      delegate: SliverChildListDelegate(
                        [
                          // MAIN SCREEN
                          const Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'The Johns',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ),

                          // JOHNS LISTVIEW
                          JohnsListView(screenWidth: screenWidth),

                          // MAIN FEED
                          MainFeed(),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}