How to set the first items of DropdownButton to be value from first API while the rest of the items to be value from second API in Flutter?

Question

DropdownButton ( isExpanded: true, iconEnabledColor: Colors.orange, items: [

    //From First API
    DropdownMenuItem(
      value: title,
      child: Text(title), 
    ),


    //From Second API
    snapshot.data.title
        .map((title) => DropdownMenuItem<Title>(
      child: Row(
        children: <Widget>[
          Text(title.title),
        ],
      ),
      value: title,
    ))
        .toList()
  ],
  onChanged: (value) {
    setState(() {
      selectedTitle = value;
    });
  },

  value: selectedTitle,
)

I expect the two result to be in one DropdownButton:

DropdownButton 1:

MS

DropdownButton 2:

MADAM MR MS SIR

Expected Result:

DropdownButton:

MS MADAM MR MS SIR

This is the error I get:

lib/account/updateProfileTab/DropDownPage2.dart:155:28: Error: A value of type 'List>' can't be assigned to a variable of type 'DropdownMenuItem'.

'List' is from 'dart:core'.
'DropdownMenuItem' is from 'package:flutter/src/material/dropdown.dart' ('file:///C:/src/flutter/packages/flutter/lib/src/material/dropdown.dart').
'Title' is from 'package:test/test/update/DropDownPage2.dart' ('lib/test/update/DropDownPage2.dart').

Try changing the type of the left hand side, or casting the right hand side to 'DropdownMenuItem'. .toList()

chunhunghan chunhunghan · Accepted Answer · 2019-08-21T05:56:05

If I understand you clear

Step 1: Get json string and generate List from API1 and API2,

List<Map> _jsonApi1 = [{"id":0,"name":"default 1"}];
List<Map> _jsonApi2 = [{"id":1,"name":"second 2"},{"id":2,"name":"third 3"}];

Step 2: Join List from API1 and API2,

List<Map> _myJson = new List.from(_jsonApi1)..addAll(_jsonApi2);

Step 3: generate DropdownMenuItem

@override
Widget build(BuildContext context) {
return new Scaffold(
  body: new Center(
    child: new DropdownButton<String>(
      isDense: true,
      hint: new Text("Select"),
      value: _mySelection,
      onChanged: (String newValue) {

        setState(() {
          _mySelection = newValue;
        });

        print (_mySelection);
      },
      items: _myJson.map((Map map) {
        return new DropdownMenuItem<String>(
          value: map["id"].toString(),
          child: new Text(
            map["name"],
          ),
        );
      }).toList(),
    ),
  ),
);

}

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

List<Map> _jsonApi1 = [{"id":0,"name":"default 1"}];
List<Map> _jsonApi2 = [{"id":1,"name":"second 2"},{"id":2,"name":"third 3"}];
List<Map> _myJson = new List.from(_jsonApi1)..addAll(_jsonApi2);

class _MyHomePageState extends State<MyHomePage> {

  String _mySelection;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new DropdownButton<String>(
          isDense: true,
          hint: new Text("Select"),
          value: _mySelection,
          onChanged: (String newValue) {

            setState(() {
              _mySelection = newValue;
            });

            print (_mySelection);
          },
          items: _myJson.map((Map map) {
            return new DropdownMenuItem<String>(
              value: map["id"].toString(),
              child: new Text(
                map["name"],
              ),
            );
          }).toList(),
        ),
      ),
    );

  }
}

How to set the first items of DropdownButton to be value from first API while the rest of the items to be value from second API in Flutter?

1 Answers