Search code examples
flutterflutter-layoutflutter-dependenciesflutter-test

It is not accepted to change the value in the Dropdown in the bottom sheet?


Flutter . It is not accepted to change the value in the Dropdown in the bottom sheet ?

I made all the changes and it didn't work !

Knowing that on a normal screen it works

please help me

class _AddPostState extends State<AddPost> {

  List<DropdownMenuItem<String>> get itemse{
    List<DropdownMenuItem<String>> menuItems = [

      DropdownMenuItem(
        value: '1',
        child: Container(

          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: const [
              SizedBox(width: 15,),
              Icon(Icons.lock_outline,size: 19,),
              SizedBox(width: 10,),
              Text('Only me'),
            ],
          ),
        ),
      ),
      DropdownMenuItem(
        value: '2',
        child: Container(

          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: const [
              SizedBox(width: 15,),
              Icon(Icons.group_rounded,size: 19,),
              SizedBox(width: 10,),
              Text('Friends'),
            ],
          ),
        ),
      ),
      DropdownMenuItem(
        value: '3',
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: const [
              SizedBox(width: 15,),
              Icon(Icons.public,size: 19,),
              SizedBox(width: 10,),
              Text('Public'),
            ],
          ),
        ),
      ),

    ];
    return menuItems;
  }
  String? selectedValue = '1';

  @override
  Widget build(BuildContext context) {

     return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
        title: const Text('Add Post'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open'),
          onPressed: bottomSheet,
        ),
      ),
    );
  }

  void bottomSheet(){
    showCupertinoModalBottomSheet(
      expand: true,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) =>Scaffold(
        appBar: AppBar(backgroundColor: Colors.white,foregroundColor: Colors.black,),

          body: Column(
          children: [
            DropdownButton(
              value: selectedValue,
              items: itemse,

              onChanged: (y) {
                setState(() {
                  selectedValue = y! as String;
                });

              },

            )
          ],
        ),
      ),
    );
  }

}

Seven days, I searched for a solution to the problem and did not find the solution. Please help

enter image description here


Solution

  • From the code i see you are not using the StatefulBuilder which will rebuild the sheet and change your value. From the code that you provided i have just created and example for you which might help you.

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List<DropdownMenuItem<String>> get itemse {
        List<DropdownMenuItem<String>> menuItems = [
          DropdownMenuItem(
            value: '1',
            child: Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: const [
                  SizedBox(
                    width: 15,
                  ),
                  Icon(
                    Icons.lock_outline,
                    size: 19,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Only me'),
                ],
              ),
            ),
          ),
          DropdownMenuItem(
            value: '2',
            child: Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: const [
                  SizedBox(
                    width: 15,
                  ),
                  Icon(
                    Icons.group_rounded,
                    size: 19,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Friends'),
                ],
              ),
            ),
          ),
          DropdownMenuItem(
            value: '3',
            child: Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: const [
                  SizedBox(
                    width: 15,
                  ),
                  Icon(
                    Icons.public,
                    size: 19,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Public'),
                ],
              ),
            ),
          ),
        ];
        return menuItems;
      }
    
      String? selectedValue = '1';
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            foregroundColor: Colors.black,
            backgroundColor: Colors.white,
            title: const Text('Add Post'),
          ),
          body: Center(
            child: ElevatedButton(
              child: const Text('Open'),
              onPressed: bottomSheet,
            ),
          ),
        );
      }
    
      void bottomSheet() {
        showCupertinoModalBottomSheet(
          expand: true,
          context: context,
          backgroundColor: Colors.transparent,
          builder: (context) =>
              StatefulBuilder(builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
            return Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                foregroundColor: Colors.black,
              ),
              body: Column(
                children: [
                  DropdownButton(
                    value: selectedValue,
                    items: itemse,
                    onChanged: (y) {
                      setState(() {
                        selectedValue = y! as String;
                      });
                    },
                  )
                ],
              ),
            );
          }),
        );
      }
    }