Unable to get values from flutter radio group in custom bottom sheet

Question

I am trying to create a custom bottom sheet and it contains a list of radio buttons. Currently the buttons are showing properly. But when user chooses an option from it, the value is not displayed on the selected page. code for custom bottom sheet :

import 'package:chavara/src/utils/theme/app_fonts.dart';
import 'package:flutter/material.dart';
import '../utils/theme/app_colors.dart';
import 'basic_text.dart';

String basicBottomSheet(BuildContext context, String heading, int initialValue) {
  String item = "";
  List<FruitsList> fList = [
    FruitsList(
      index: 1,
      name: "Mango",
    ),
    FruitsList(
      index: 2,
      name: "Apple",
    ),
    FruitsList(
      index: 3,
      name: "Banana",
    ),
    FruitsList(
      index: 4,
      name: "Cherry",
    ),
    FruitsList(
      index: 5,
      name: "Mango",
    ),
    FruitsList(
      index: 6,
      name: "Apple",
    ),
    FruitsList(
      index: 7,
      name: "Banana",
    ),
    FruitsList(
      index: 8,
      name: "Cherry",
    ),
  ];
  showModalBottomSheet<void>(
    context: context,
    shape: const RoundedRectangleBorder( // <-- SEE HERE
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(20.0),
      ),
    ),
    builder: (BuildContext context) {
      return SizedBox(
        height: 600,
        child: Center(
          child: Column(
            children: <Widget>[
              Column(
                children: const <Widget>[
                  Padding(
                      padding : EdgeInsets.fromLTRB(30, 40, 30, 10),
                      child: SizedBox(
                        width: double.infinity,
                        child: BasicText(
                            text: "Bottom Dialog",
                            textColor: AppColors.black,
                            fontSize: 20,
                            fontWeight:
                            AppFonts.fontWeightSemiBold),
                      )
                  ),
                ],
              ),
              Padding(
                padding : const EdgeInsets.fromLTRB(30, 0, 30, 10),
                child: Container(height: 1, color: AppColors.bottomSheetLine)
              ),
              Expanded(
                  child: SizedBox(
                    height: 350.0,
                    child: StatefulBuilder(
                        builder: (context, setState) {
                          return SingleChildScrollView(
                            child: Column(
                              children:
                              fList.map((data) => RadioListTile(
                                title: Text(data.name,style: const TextStyle(fontSize: 14)),
                                groupValue: initialValue,
                                value: data.index,
                                onChanged: (val) {
                                  setState(() {
                                    initialValue = data.index;
                                    item = data.name;
                                    Navigator.pop(context);
                                  });
                                },
                              )).toList(),
                            ),
                          );
                        }
                    ),
                  )),
            ],
          ),
        ),
      );
    },
  );
  return item;
}

class FruitsList {
  String name;
  int index;
  FruitsList({required this.name, required this.index});
}

and the function calling is from another page...

 register(BuildContext context) {
    int initialValue =0;
    String item = basicBottomSheet(context,"Bottom Dialogue",initialValue);
    setState(() {
      snack(item, AppColors.secondary, context);
    });
}

How can I get the value from the bottom sheet after user selects one value...?

Answer 1

Your function returns before the bottom sheet is finished. To solve this you should await the showModalBottomSheet and also put the result in the pop. This also requires the function to be async. I believe this should work:

Future<String> basicBottomSheet(BuildContext context, String heading, int initialValue) async {
  List<FruitsList> fList = [
    FruitsList(
      index: 1,
      name: "Mango",
    ),
    FruitsList(
      index: 2,
      name: "Apple",
    ),
    FruitsList(
      index: 3,
      name: "Banana",
    ),
    FruitsList(
      index: 4,
      name: "Cherry",
    ),
    FruitsList(
      index: 5,
      name: "Mango",
    ),
    FruitsList(
      index: 6,
      name: "Apple",
    ),
    FruitsList(
      index: 7,
      name: "Banana",
    ),
    FruitsList(
      index: 8,
      name: "Cherry",
    ),
  ];
  return await showModalBottomSheet<String>(
    context: context,
    shape: const RoundedRectangleBorder( // <-- SEE HERE
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(20.0),
      ),
    ),
    builder: (BuildContext context) {
      return SizedBox(
        height: 600,
        child: Center(
          child: Column(
            children: <Widget>[
              Column(
                children: const <Widget>[
                  Padding(
                      padding : EdgeInsets.fromLTRB(30, 40, 30, 10),
                      child: SizedBox(
                        width: double.infinity,
                        child: BasicText(
                            text: "Bottom Dialog",
                            textColor: AppColors.black,
                            fontSize: 20,
                            fontWeight:
                            AppFonts.fontWeightSemiBold),
                      )
                  ),
                ],
              ),
              Padding(
                padding : const EdgeInsets.fromLTRB(30, 0, 30, 10),
                child: Container(height: 1, color: AppColors.bottomSheetLine)
              ),
              Expanded(
                  child: SizedBox(
                    height: 350.0,
                    child: StatefulBuilder(
                        builder: (context, setState) {
                          return SingleChildScrollView(
                            child: Column(
                              children:
                              fList.map((data) => RadioListTile(
                                title: Text(data.name,style: const TextStyle(fontSize: 14)),
                                groupValue: initialValue,
                                value: data.index,
                                onChanged: (val) {
                                  setState(() {
                                    initialValue = data.index;
                                    Navigator.pop<String>(context, data.name);
                                  });
                                },
                              )).toList(),
                            ),
                          );
                        }
                    ),
                  )),
            ],
          ),
        ),
      );
    },
  );
}

and

 register(BuildContext context) async {
    int initialValue =0;
    String item = await basicBottomSheet(context,"Bottom Dialogue",initialValue);
    setState(() {
      snack(item, AppColors.secondary, context);
    });
}