[Flutter]Drop Down Button

들어가며

모바일 앱을 사용하다보면 메뉴버튼을 클릭했을 때, 메뉴가 쫙 나오면서 선택할 수 있는 그런 버튼들을 보셨을 겁니다. 오늘은 flutter의 Drop Down Button에 대해서 알아보겠습니다.

환경 구성

Drop Down Button의 메뉴를 바꾸기 위해서는 setState메소드가 필요합니다. StatefulWidget으로 빈 화면을 만들어주세요.

import 'package:flutter/material.dart';

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

  @override
  State<DropDownButtonPage> createState() => _DropDownButtonPageState();
}

class _DropDownButtonPageState extends State<DropDownButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drop Down Button'),
      ),
    );
  }
}

실제 앱처럼 구성해보려 합니다. AppBar에 actions에 메뉴버튼을 Drop Down Button으로 구성해볼게요! AppBar에 actions를 추가해줍니다.

...
class _DropDownButtonPageState extends State<DropDownButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drop Down Button'),
        actions: [
          _menuBtn(),
        ],
      ),
    );
  }

  Widget _menuBtn() {
    return Container();
  }
...

직접 actions에 Drop Donw Button을 구성할 수 있지만, 그러면 코드가 난잡해보이기 때문에 _menuBtn()이라는 위젯 메소드로 코드를 분리시키겠습니다. 자, 이제 준비는 다 끝났습니다. 초기에 DropDownButton이 가르키는 메뉴는 _build메소드 상단에서 선언하겠습니다.

...
  State<DropDownButtonPage> createState() => _DropDownButtonPageState();
}

class _DropDownButtonPageState extends State<DropDownButtonPage> {
  var currentValue = '1 menu';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drop Down Button'),
        actions: [
          _menuBtn(),
        ],
      ),
...

이제 menuBtn() 메소드가 반환하는 Container위젯은 지우고, DropDownButton()위젯을 전달합니다.

...
  Widget _menuBtn() {
    return DropdownButton();
  }
...

그냥 전달만하게 되면, 에러가 발생할겁니다. 왜냐하면, required 아규먼트들이 있기 때문이죠. DropdownButton위젯이 가질 메뉴들을 의미하는 items와 메뉴를 선택 즉, 클릭할 때 발생하는 onChanged를 반드시 전달해줘야 합니다.

...
  Widget _menuBtn() {
    return DropdownButton(
      items: [], 
      onChanged: (Object? value) {  },
    );
  }
...

먼저, 초기에 기본값을 설정해주겠습니다. value에 상단에서 선언한 currentValue를 전달합니다. 그리고 초기값을 포함한 items를 전달하겠습니다. items는 DropdownMenuItem만 전달할 수 있게 설정되어있습니다. 그리고 DropdownMenuItem의 value는 항목이 가지는 값이고, child는 화면에 랜더링되는 값입니다. 일단, 초기값의 숫자만 변경한 메뉴들을 전달하겠습니다.

...
      items: [
        DropdownMenuItem(
          value: '1 menu',
          child: Text('1 menu')
        ),
        DropdownMenuItem(
          value: '2 menu',
          child: Text('2 menu')
        ),
        DropdownMenuItem(
          value: '3 menu',
          child: Text('3 menu')
        ),
      ], 
...

이제, onChanged를 통해서 새로운 값을 선택할때마다 currentValue에 선택한 메뉴의 value를 전달하면 되겠죠?

...
      onChanged: (String? value) { 
        setState(() {
          currentValue = value!;
        });
       },
...

처음에 자동완성으로 세팅한 value는 기본적으로 Object라고 타입이 지정되어 있습니다. 하지만, 저희 value는 문자이기 때문에 String으로 바꾸어줍니다. 이제 저장하고 핫 리로딩 해보겠습니다!

스크린샷들은 각 메뉴를 선택했을 때, value가 변하는 것을 보여주기 위해 올렸습니다. 더 자세한 내용은 공식문서를 확인해주세요 !

DropdownButton 공식문서

전체 소스코드

import 'package:flutter/material.dart';

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

  @override
  State<DropDownButtonPage> createState() => _DropDownButtonPageState();
}

class _DropDownButtonPageState extends State<DropDownButtonPage> {
  var currentValue = '1 menu';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drop Down Button'),
        actions: [
          _menuBtn(),
        ],
      ),
    );
  }

  Widget _menuBtn() {
    return DropdownButton(
      value: currentValue,
      items: [
        DropdownMenuItem(value: '1 menu', child: Text('1 menu')),
        DropdownMenuItem(value: '2 menu', child: Text('2 menu')),
        DropdownMenuItem(value: '3 menu', child: Text('3 menu')),
      ],
      onChanged: (String? value) {
        setState(() {
          currentValue = value!;
        });
      },
    );
  }
}