future 로 가져온 json data map으로 정리하기

in Dev on Flutter

flutter futurebuild 대한 뻘짓 정리


flutter

flutter 개발을 하면서 한 뻘짓을 기록한다. 이번 뻘짓은 futurebuild 에 관한 내용이다.

futuerbuild

데이터를 모두 다 받기 전에 그릴 수 없는 부분을 먼저 그려주기 위해 사용함

뻘짓

Rest Api로 json 데이터를 가져왔음. 메뉴 박스에 아이템을 동적으로 추가 해야 하는 상황임 select box 를 생각했지만 flutter 에는 DropdownButton 을 씀

안드로이드 환경에서는 Material, 아이폰 에서는 Cupertino 를 import 하여 환경을 맞춘다
Material 로 ios 에서 돌려봤을때 되기는 함 다만 안드로이드 ui로 나옴

DropdownButton 구조

DropdownButton<dynamic> DropdownButton({
  Key? key,
  required List<DropdownMenuItem<dynamic>>? items,   
  dynamic value,   
  Widget? hint,
  required void Function(dynamic)? onChanged,
  void Function()? onTap,
  ...길어서 생략
  })

가져온 데이터를 모델링을 통해서 List 으로 가져왔다 items 에 넣을라고 하니..각종 에러 발생!!!

결국 map 쓰고 해결 함… map이 익숙하지 않아서 정리하고자 남겨놓는다

FutureBuilder<List<dynamic>>(
  future: future,
  builder: (context, snapshot) {
    print("future");
    if (snapshot.hasData) {

      return DropdownButton<dynamic>(
        hint: Text(""),
        value: selectedValue,
        items: snapshot.data!
            .map<DropdownMenuItem<dynamic>>((val) =>
            DropdownMenuItem<dynamic>(
                child: Text(val['name'].toString()),
                value: val['value']))
            .toList(),
        onChanged: (value) {
          setState(() {
            selectedValue = value;
          });

        },
      );
    } else if (snapshot.hasError) {
      print("error data type = ${snapshot.data.runtimeType.toString()}");
      print("error = ${snapshot.error}");
      // return Text("${snapshot.error}");
    }
    return const CircularProgressIndicator();
  },
),