Flutter 플러터에서 DropdownButtons와 DropdownMenuItems를 어떻게 사용자 정의해야 하나요?, How should I customize DropdownButtons and DropdownMenuItems in Flutter?

질문

기본 DropdownButton은 DropdownMenuItems와 함께 연결되어 연한 회색 드롭다운을 반환합니다. 드롭다운을 어떻게 사용자 정의할 수 있을까요? (예: 배경색, 드롭다운 너비) DropdownButton과 DropdownMenuItem의 style 속성을 변경할 수 있습니다. 아래와 같이:

return new DropdownButton(
      value: ...,
      items: ...,
      onChanged: ...,
      style: new TextStyle(
        color: Colors.white,
      ),
    );

하지만 이렇게 해도 드롭다운의 배경색은 변경되지 않습니다.

DropdownMenu를 복사하고 확장해야 할까요? Flutter는 가까운 미래에 이 위젯에 대한 사용자 정의 기능을 추가할 계획이 있나요?

답변

이를 위해 DropdownButton을 Theme 위젯으로 감싸고 canvasColor를 무시하도록 재정의하여 이를 달성할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _value = 42;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.blue.shade200,
          ),
          child: new DropdownButton(
            value: _value,
            items: <DropdownMenuItem<int>>[
              new DropdownMenuItem(
                child: new Text('Foo'),
                value: 0,
              ),
              new DropdownMenuItem(
                child: new Text('Bar'),
                value: 42,
              ),
            ],
            onChanged: (int value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}