skip to Main Content

suppose you a List of String List which will come from API.
now you want to show that list inside DropdownButton.
Let’s say your list is like

homepage_categories": [
    {
    "id": 1,
    "name": "Electronics",
    "slug": "electronics",
    "icon": "fas fa-anchor",
    "image": "uploads/custom-images/electronics-2022-11-19-02-48-28-5548.png"
    },
    {
    "id": 2,
    "name": "Game",
    "slug": "game",
    "icon": "fas fa-gamepad",
    "image": "uploads/custom-images/game-2022-11-19-02-48-48-6382.png"
    },
    {
    "id": 3,
    "name": "Mobile",
    "slug": "mobile",
    "icon": "fas fa-mobile-alt",
    "image": "uploads/custom-images/mobile-2022-11-19-02-49-20-2538.png"
    },
    {
    "id": 4,
    "name": "Lifestyle",
    "slug": "lifestyle",
    "icon": "fas fa-home",
    "image": "uploads/custom-images/lifestyle-2022-11-19-02-49-38-3139.png"
    },
]

From this API you can easily fetch.

So the Question is How can i assign a default/initial value like Select Category or something else into that list

I have tried this…

    late List<CategoryModel> category;
  late String value;

  @override
  void initState() {
    category = context.read<CategoryBrandCubit>().categoryBrandModel.category;
    value = category.first.id.toString();
    super.initState();
  }


DropdownButton<String>(
          hint: const Text('Select Status'),
          isExpanded: true,
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          underline: const SizedBox(),
          value: value,
          onChanged: (String? val) {
            value = val!;
            bloc.add(StoreProductEventCategory(value));
            print('catVal: $value');
          },
        
          items: category
              .map(
                (e) => DropdownMenuItem<String>(
                  value: e.id.toString(),
                  child: Text(e.name),
                ),
              )
              .toList(),
        ),

2

Answers


  1. try this:

    DropdownButton<String>(
                                hint: const Text('Select Status'),
                                isExpanded: true,
                                icon: const Icon(
                                    Icons.keyboard_arrow_down_rounded),
                                underline: const SizedBox(),
                                value: "default",
                                onChanged: (String? val) {},
                                items: [
                                  const DropdownMenuItem(
                                    alignment: Alignment.center,
                                    value: "default",
                                    enabled: false,
                                    child: Text("Select Your role"),
                                  ),
                                  ...category
                                      .map(
                                        (e) => DropdownMenuItem<String>(
                                          value: e.id.toString(),
                                          child: Text(e.name),
                                        ),
                                      )
                                      .toList()
                                ],
                              ),
    
    Login or Signup to reply.
  2. The DropdownButton default value is corrosponding to the value field. If we take a look at your code we see that you assign value but it is empty:

    late String value; // this is empty
    
    DropdownButton<String>(
              hint: const Text('Select Status'),
              isExpanded: true,
              icon: const Icon(Icons.keyboard_arrow_down_rounded),
              underline: const SizedBox(),
              value: value, // always the current value
              onChanged: (String? val) {
                value = val!;
                bloc.add(StoreProductEventCategory(value));
                print('catVal: $value');
              },
    

    What you have to do is asigning an initial value to value. You could do something like: value = homepage_categories[0].name

    If you take a look at the official flutter documentation you can also see that the value field is described as the following:

    value → T?: The value of the currently selected DropdownMenuItem.

    You can read more about it here and see the full example.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search