Question 214650 in Flutter Question posted in
The official Flutter documentation can be found here.

Radio value is only change when close and reopen the showModalBottomSheet in Flutter

This radio button inside showModalBottomSheet is only change when I close and reopen this modalBottomSheet. setState is not working properly there. Can anyone solve this and say why this is happening?

But when I put these radio out from the modal sheet it works normally.

import 'package:flutter/material.dart';

/// Flutter code sample for [showModalBottomSheet].

void main() => runApp(const BottomSheetApp());

class BottomSheetApp extends StatelessWidget {
  const BottomSheetApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

class BottomSheetExample extends StatefulWidget {
  const BottomSheetExample({super.key});
    @override
  State<BottomSheetExample> createState() => _BottomSheetExampleState();
}

class _BottomSheetExampleState extends State<BottomSheetExample> {
  int _selectedOption = 0;
  
  
  @override
  Widget build(BuildContext context) {
    
    void handleRadioValueChanged(int? value) {
      setState(() {
        _selectedOption = value!;
      });
    }
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                     ListTile(
                      title: const Text("Administrative Associate"),
                      trailing: Radio(
                          value: 2,
                          groupValue: _selectedOption,
                          onChanged: handleRadioValueChanged),
                    ),
                    ListTile(
                      title: const Text("Account Manager"),
                      trailing: Radio(
                          value: 3,
                          groupValue: _selectedOption,
                          onChanged: handleRadioValueChanged),
                    ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

I want to get the changed value without closing it.

Tags:

2

Answers


  1. 0 
    import 'package:flutter/material.dart';

/// Flutter code sample for [showModalBottomSheet].

void main() => runApp(const BottomSheetApp());

class BottomSheetApp extends StatelessWidget {
 const BottomSheetApp({super.key});

 @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
         appBar: AppBar(title: const Text('Bottom Sheet Sample')),
         body: const BottomSheetExample(),
         ),
       );
      }
    }

    class BottomSheetExample extends StatefulWidget {
    const BottomSheetExample({super.key});
    @override
   State<BottomSheetExample> createState() => _BottomSheetExampleState();
   }

  class _BottomSheetExampleState extends State<BottomSheetExample> {
  int _selectedOption = 0;


  @override
   Widget build(BuildContext context) {

   void handleRadioValueChanged(int? value,StateSetter setState) {
     setState(() {
     _selectedOption = value!;
    });
   }
     return Center(
      child: ElevatedButton(
       child: const Text('showModalBottomSheet'),
        onPressed: () {
        showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder:(BuildContext context,StateSetter setState) =>  SizedBox(
              height: 200,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                   ListTile(
                    title: const Text("Administrative Associate"),
                    trailing: Radio(
                        value: 2,
                        groupValue: _selectedOption,
                        onChanged: (value) => handleRadioValueChanged(value,setState)),
                  ),
                  ListTile(
                    title: const Text("Account Manager"),
                    trailing: Radio(
                        value: 3,
                        groupValue: _selectedOption,
                        onChanged: (value) => handleRadioValueChanged(value,setState)),
                  ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    },
  ),
);
}
}
    Login or Signup to reply.
  2. 0

    Add your widget inside StatefulBuilder

    ElevatedButton(
    child: const Text('showModalBottomSheet'),
    onPressed: () {
      showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (BuildContext context, StateSetter stateSetter) {
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ListTile(
                        title: const Text("Administrative Associate"),
                        trailing: Radio(
                            value: 2,
                            groupValue: _selectedOption,
                            onChanged: (value) {
                              stateSetter(() {
                                handleRadioValueChanged(value);
                              });
                            }),
                      ),
                      ListTile(
                        title: const Text("Account Manager"),
                        trailing: Radio(
                            value: 3,
                            groupValue: _selectedOption,
                            onChanged: (value) {
                              stateSetter(() {
                                handleRadioValueChanged(value);
                              });
                            }),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      );
    },
  ),

    Updated Answer

    Your widget:

    ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return CustomModelSheet(selectedOption: _selectedOption);
            },
          );
        },
      ),

    Bottomsheet widget:

    class CustomModelSheet extends StatefulWidget {
  CustomModelSheet({
    super.key,
    required int selectedOption,
  }) : selectedOption = selectedOption;

  int selectedOption;

  @override
  State<CustomModelSheet> createState() => _CustomModelSheetState();
}

class _CustomModelSheetState extends State<CustomModelSheet> {
  void handleRadioValueChanged(int? value) {
    setState(() {
      widget.selectedOption = value!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter stateSetter) {
        return SizedBox(
          height: 200,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  title: const Text("Administrative Associate"),
                  trailing: Radio(
                      value: 2,
                      groupValue: widget.selectedOption,
                      onChanged: (value) {
                        stateSetter(() {
                          handleRadioValueChanged(value);
                        });
                      }),
                ),
                ListTile(
                  title: const Text("Account Manager"),
                  trailing: Radio(
                      value: 3,
                      groupValue: widget.selectedOption,
                      onChanged: (value) {
                        stateSetter(() {
                          handleRadioValueChanged(value);
                        });
                      }),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search