[Flutter]Drawerの背景色を透明にするには？

どうも、ちょげ(@chogetarou)です。

Drawerの背景色を透明にする方法を紹介します。

方法

Drawerの背景色を透明にするには、Themeを使います。

まず、DrawerをThemeでラップします。

Themeの引数「data」には、Theme.of(context).copyWith()を指定します。

そして、copyWithのの引数「canvasColor」に「Colors.transparent」を指定します。

Theme(
  data: Theme.of(context).copyWith(
    canvasColor: Colors.transparent,
  ),
  child: Drawer(・・・),
),

ThemeのcanvasColorに「Colors.transparent」を設定することで、Drawerの背景色を透明にすることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        drawer: Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.transparent,
          ),
          child: Drawer(
            elevation: 0,
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: (context, index) => ListTile(
                tileColor: Colors.pink[50],
                title: Text('Item $index'),
              ),
              itemCount: 10,
            ),
          ),
        ),
        body: Center(
          child: Text('Hello, FLutter'),
        ),
      ),
    );
  }