web-dev-qa-db-ja.com

フラッタードロワーの背景色を変更する

フラッターナビドロワーの背景色を変更するにはどうすればよいですか？色や背景色のプロパティはないようです。

navigation-drawerflutterdrawer
13
AlexL

ListViewのchildプロパティにDrawerを構築する場合、DrawerのさまざまなセクションをContainer内にラップして、colorContainerのプロパティ。

enter image description here

drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new Container(child: new DrawerHeader(child: new CircleAvatar()),color: Colors.tealAccent,),
            new Container (
              color: Colors.blueAccent,
              child: new Column(
                children: new List.generate(4, (int index){
                  return new ListTile(
                    leading: new Icon(Icons.info),
                  );
                }),
              ),
            )
          ],
        ),
      ),

一貫性のあるカラーリングデザインをすでに頭に置いている場合のより良い代替策は、アプリのルートのテーマプロパティの下にThemeDataを定義することです。DrawerHeaderとボディはcanvasColor、したがって、色を変更するには、それらのいずれかの値をオーバーライドする必要があります。

enter image description here

return new MaterialApp(
....
theme: new ThemeData(
       canvasColor: Colors.redAccent,

       ....),
)
28
aziza

DrawerをThemeでラップする最適な方法、

例えば：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //other scaffold items
        drawer: Theme(
           data: Theme.of(context).copyWith(
                 canvasColor: Colors.blue, //This will change the drawer background to blue.
                 //other styles
              ),
              child: Drawer(
                 child: Column(
                    children: <Widget>[
                       //drawer stuffs
                    ],
                 ),
             ),
        );
  }
5
Raj Yadav

おそらく最も簡単な方法は、ListView内にContainerをラップし、次のように色を指定することです。

drawer: Drawer(
  child: Container(color: Colors.red,
    child: new ListView(
      ...
    )
  )
)
2
JonasH

プレーンバックグラウンド

primarySwatch：Colors.brownプロパティのThemeData

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      theme: new ThemeData(
        primarySwatch: Colors.brown, // Your app THEME-COLOR
      ),
      home: MyHomePage(title: appTitle),
    );
  }
}

グラデーション背景gradientプロパティをAppBar。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("profyl.org",
              style: TextStyle(color: Colors.white),
              textDirection: TextDirection.ltr),
          flexibleSpace: Container(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [
                    const Color(0xFF3366FF),
                    const Color(0xFF00CCFF),
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
          ),
        ),
        body: HomeListPage(),
        drawer: DrawerPage());
  }

enter image description hereenter image description here

0
jazzbpn

引き出しヘッダーの色を変更するには、ブローコードを使用します

UserAccountsDrawerHeader(
  accountName: Text("Ashish Rawat"),
  accountEmail: Text("[email protected]"),
  decoration: BoxDecoration(
    color: const Color(0xFF00897b),
  ),
  currentAccountPicture: CircleAvatar(
    backgroundColor: Theme.of(ctxt).platform == TargetPlatform.iOS
        ? const Color(0xFF00897b)
        : Colors.white,
    child: Text(
      "A",
      style: TextStyle(fontSize: 40.0),
    ),
  ),
),
0
Shan Mk