I feel as if this is something to do with the fact that I have them inside a modal, regardless, I cant seem to figure this out. Both the Radio buttons and the list tiles are visible in the modal but they have no reaction when pressed. I have tried placing the difficulty variable under both the of builders, (one for the whole page and the one for the modal itself but had no luck), along with before the returns but no luck, I'm pretty positive it's something wrong with the variable location but nothing is working.

Here's the code:

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  //String? difficulty
  @override
  Widget build(BuildContext context) {
    //String? difficulty
    return Scaffold(
        body: Builder(
            builder: (context) => Center(
                  //on press of this button have modal come from bottom with create screen
                  child: TextButton(
                      onPressed: () {
                        showModalBottomSheet(
                          context: context,
                          builder: (context) {
                            String? difficulty;

                            return Padding(
                              padding: const EdgeInsets.only(
                                  left: 20, right: 20, top: 20),
                              child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      "Difficulty",
                                      style: TextStyle(fontSize: 20),
                                    ),
                                    //this is where the radio buttons will sit

                                    ListTile(
                                      title: const Text("easy"),
                                      leading: Radio(
                                          value: 'easy',
                                          groupValue: difficulty,
                                          onChanged: (value) {
                                            setState(() {
                                              difficulty = value;
                                            });
                                          }),
                                    ),
                                    ListTile(
                                      title: const Text("medium"),
                                      leading: Radio(
                                          value: 'medium',
                                          groupValue: difficulty,
                                          onChanged: (value) {
                                            setState(() {
                                              difficulty = value;
                                            });
                                          }),
                                    )
                                  ]),
                            );
                          },
                        );
                      },
                      child: const Text("Create Bubble")),
                )));
  }
}

All help is appreciated!

CodePudding user response：

The problem was bottom sheet state was not being update

class Home extends StatelessWidget {
Home({Key? key}) : super(key: key);
String? difficulty;
@override
Widget build(BuildContext context) {
return Scaffold(
    body: Center(
  //on press of this button have modal come from bottom with create screen
  child: TextButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
            //Stateful class was not updating the bottomsheet state 
            //I created statefulbuilder where required
            return StatefulBuilder(
                builder: (context, StateSetter setModalState) {
              return Padding(
                padding:
                    const EdgeInsets.only(left: 20, right: 20, top: 20),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text(
                        "Difficulty",
                        style: TextStyle(fontSize: 20),
                      ),
                      //this is where the radio buttons will sit

                      ListTile(
                        title: const Text("easy"),
                        leading: Radio(
                            value: 'easy',
                            groupValue: difficulty,
                            onChanged: (value) {
                            // set is changed here 
                              setModalState(() {
                                difficulty = value.toString();
                              });
                            }),
                      ),
                      ListTile(
                        title: const Text("medium"),
                        leading: Radio(
                            value: 'medium',
                            groupValue: difficulty,
                            onChanged: (value) {
                               // set is changed here 
                              setModalState(() {
                                difficulty = value.toString();
                              });
                            }),
                      )
                    ]),
              );
            });
          },
        );
      },
      child: const Text("Create Bubble")),
));
}
}