FlutterでDropdownButtonsおよびDropdownMenuItemsをカスタマイズするにはどうすればよいですか？

Question

デフォルトのDropdownButtonはDropDownMenuItemsで明るい灰色のドロップダウンを返します。ドロップダウンをカスタマイズするにはどうすればよいですか（背景色、ドロップダウンの幅など）？私はこのように、DropdownButtonとDropdownMenuItemの両方でstyleプロパティを変更することができます。

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

が、これは、ドロップダウンの背景色を変更しません。

DropDownMenuをコピーして拡張する必要がありますか？ Flutterはこのウィジェットのカスタマイズを近い将来追加する予定ですか？

Answer 1

コリンが言ったように、あなたのDropdownMenuItemはあなたのThemeDataクラスに従います。そのbackgroundColorはThemeDataクラスのcanvasColorと一致するだけでなく、同じTextStyleに従います。

ので、簡単な例のために：あなたは、メニューのwidthを制御したい場合は

new ThemeData(
     fontFamily: "Encode Sans", //my custom font 
     canvasColor: _turquoise, //my custom color 
//other theme data) 

さらに、あなたはそのchildプロパティ新しいContainerを供給し、所望widthを追加し、以下のGIFを確認することができますwidth: 100.0で始まり、200.0に変更した後にホットリロードした後、widthがどのように操作されたかを確認してください。後で複雑なレイアウト内でメニューを使用したときにオーバーフローの問題が発生しないように適切な幅を使用してください。

class TestPage extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title:new Text ("Test"), 
    ), 
     body: new Center(
     child: new DropdownButton(items: new List.generate(20, (int index){ 
      return new DropdownMenuItem(child: new Container(
      child: new Text ("Item#$index"), 
      width: 200.0, //200.0 to 100.0 
     )); 
     }) 
      , onChanged: null) 
    ), 
    ); 
    } 
} 

Answer 2

これは、ThemeウィジェットにDropdownButtonをラップし、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; 
       }); 
      }, 
     ), 
     ), 
    ), 
    ); 
    } 
}