[Flutter] DropDownButton 활용하기

시작하기에 앞서 우리는 DropDownButton으로 선택하면 우리가 선택한 항목들이 변경되는 것을 바라기 때문에 

StatelessWidget에서 StatefulWidget으로 바꿔서 값이 변경되면 UI를 다시 그리도록 해봅시다

이 화면을 따라서 만들어볼겁니다

 

먼저 DropDownButton의 추가할 List들을 정리해줍니다

final iconList = [
    MyFlutterApp.emo_angry,
    MyFlutterApp.emo_coffee,
    MyFlutterApp.emo_happy,
    MyFlutterApp.emo_sleep,
    MyFlutterApp.emo_surprised,
    MyFlutterApp.emo_thumbsup,
    MyFlutterApp.emo_tongue,
    MyFlutterApp.emo_unhappy,
    MyFlutterApp.emo_wink,
  ];
  IconData? selecticon;
  
   @override
  void initState() {
    super.initState();
    setState(() {
      selecticon = iconList[0];
    });
  }

 

저는 위에서 MyFlutterApp이라는 CustomIcon을 다운받아 불러왔습니다 다른 String으로 대체하면 String으로 된 문자열을 불러올 수 있습니다

그 다음 selecticon으로 내가 어떤 Icon을 골랐는지 알아낼수 있습니다

 

그리고 init() ->  setState()로 처음선택 아이콘을 초기화 해줍니다

 

전체코드

import 'package:flutter/material.dart';

import 'my_flutter_app_icons.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  final iconList = [
    MyFlutterApp.emo_angry,
    MyFlutterApp.emo_coffee,
    MyFlutterApp.emo_happy,
    MyFlutterApp.emo_sleep,
    MyFlutterApp.emo_surprised,
    MyFlutterApp.emo_thumbsup,
    MyFlutterApp.emo_tongue,
    MyFlutterApp.emo_unhappy,
    MyFlutterApp.emo_wink,
  ];
  IconData? selecticon;

  @override
  void initState() {
    super.initState();
    setState(() {
      selecticon = iconList[0];
    });
  }

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Menu Example',
      home: Scaffold(
        body: Center(
          child: DropdownButton(	//DrpdownButton widget
            dropdownColor: const Color.fromARGB(255, 184, 207, 226), //열었을시 색상 설정
            value: selecticon,	// 선택한 icon
            icon: const SizedBox.shrink(),	//DropdownButton의 화살표를 없애줍니다
            								//--> 깔끔하게 하기 위해서
            underline: Container(), // underLine도 삭제를 해주구요
            items: iconList	//자바 GUI를 그리듯이 선택한 아이콘으로 바뀌도록 하는 작업입니다
            				//Value는 내가 드롭다운버튼에서 선택한 값을 바뀝니다
                .map((e) => DropdownMenuItem(
                      value: e,
                      child: Icon(e),
                    ))
                .toList(),
            onChanged: (value) {
              setState(() {	//이제 selecticon을 내가 선택한 값으로 재 설정해줍니다
                selecticon = value!;
              });
            },
          ),
        ),
      ),
    );
}

여기서 확인해야 할 점은 icon: 설정으로 기본으로 설정되는 화살표 아이콘을 없애주고 , underLine도 깔끔하게 없애주었습니다

그리고 item을 클릭하면 클릭한 인덱스를 value에 넣고 onChange메소드로 selecticon의 값을 바꿔줍니다