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

Question

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

This answer can help you: https://stackoverflow.com/a/56972160/3746290 — André Sousa, Jul 11 '22 at 12:07

score 0 · Accepted Answer · answered Jul 11 '22 at 12:16

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;
                  });
                },
              )
            ],
          ),
        );
      }),
    );
  }
}

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

1 Answers1