Comment personnaliser DropdownButtons et DropdownMenuItems dans Flutter?

Question

La valeur par défaut DropdownButton avec DropdownMenuItems renvoie une liste déroulante gris clair. Comment dois-je personnaliser la liste déroulante (par exemple, la couleur d'arrière-plan, la largeur de la liste déroulante)? Je peux changer la propriété style dans les deux DropDownButton et DropdownMenuItem, comme ceci:

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

mais cela ne change pas la couleur d'arrière-plan de la liste déroulante.

Dois-je copier DropdownMenu et l'étendre? Est-ce que Flutter prévoit ajouter de la personnalisation pour ce widget dans un proche avenir?

Answer 1

Comme dit Collin, votre DropdownMenuItem suivra votre classe ThemeData. Non seulement son backgroundColor correspondra au canvasColor dans votre classe ThemeData, mais il suivra le même TextStyle.

Ainsi, pour un exemple rapide:

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

De plus, si vous souhaitez contrôler la width du menu, vous pouvez nourrir sa child propriété un nouveau Container et ajoutez le choix width, vérifiez le GIF suivant , J'ai commencé avec width: 100.0 puis rechargé à chaud après l'avoir changé en 200.0, remarquez comment la width a été manipulée, assurez-vous simplement d'utiliser une largeur appropriée pour ne pas avoir de problèmes de débordement plus tard lorsque vous utilisez le menu dans une mise en page plus complexe.

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

Vous pouvez accomplir ceci en enveloppant le DropdownButton dans un widget Theme et en remplaçant le 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; 
       }); 
      }, 
     ), 
     ), 
    ), 
    ); 
    } 
}