flutterで配列内にあるJSONの文字列で、selectboxを作成したい

Question

実現したいこと

flutterでAPIより以下のデータが返ってきたときに、返ってきたJSON形式のnameをselectboxの要素にしたいです。

###　返ってきたAPIの内容

[
    {
        "id":101,
        "name":"AAA"
    },
    {
        "id":102,
        "name":"BBB"
    }
]

Answer 1

jsonの扱い方については下記ページ、
https://docs.flutter.dev/development/data-and-backend/json

セレクトボックス(DropdownButton)については下記ページが参考になると思います。
https://api.flutter.dev/flutter/material/DropdownButton-class.html

import 'package:flutter/material.dart';
import 'dart:convert';

class User{
  User({
    required this.id,
    required this.name,
  });
  final int id;
  final String name;

  factory User.fromMap(Map<String, dynamic> map){
    return User(
      id: map['id'] as int,
      name: map['name'] as String,
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String dropdownValue = '';
  late List<User> listOfUsers;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //↓ここに、APIを使ってjsonデータを取得するコードを書く。
    final String jsonStr = '[{"id":101,"name":"AAA"},{"id":102,"name":"BBB"}]';
    List<dynamic> decoded = json.decode(jsonStr);
    print('${decoded.runtimeType}');
    print(decoded);
    listOfUsers = decoded.map((map)=>User.fromMap(map)).toList();

    dropdownValue = listOfUsers.first.name;
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body:Center(
        child:DropdownButton<String>(
          value: dropdownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? value) {
            // This is called when the user selects an item.
            setState(() {
              dropdownValue = value!;
            });
          },
          items: listOfUsers.map<DropdownMenuItem<String>>((User user) {
            return DropdownMenuItem<String>(
              value: user.name,
              child: Text(user.name),
            );
          }).toList(),
        ),
      ),
    );
  }
}