【Flutter】Drawerの背景色を透過させる方法

我々ハッチアウトスクールのHPも、この透過の技術を使ってDrawerを実装しています。

この記事を通して何ができる様になるのか、良ければ一度HPのDrawerをチェックしてみてください。(スマホサイズ時にDrawer実装中)

ハッチアウトスクール

アプリによく見られるDrawer。Flutterでは簡単に実装することができます。

まずはシンプルなDrawerの実装方法を確認してみましょう。

Drawerの実装方法

上記GIFのようなDrawerを実装してみます。

実装方法はシンプルで、ScaffoldのdrawerプロパティにDrawerウィジェットを追加するだけです。

コードは以下です。

  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Drawer透過方法'),
     ),
     drawer: Drawer(),
     body: Center(
       child: Text('Drawerを実装してみるよ！'),
     ),
   );
 }

これでDrawerの実装は完了です。

次にDrawerの背景色を変更する方法を紹介します。

Drawerの背景色を変更する方法

上記GIFのようにDrawerの背景色を変更してみましょう。

よく紹介されている方法が、Drawerのchildプロパティに色付きのContainerウィジェットを追加する方法です。

こちらも紹介しておくと以下のコードになります。

  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Drawer透過方法'),
     ),
     drawer: Drawer(
       child: Container(
         color: Colors.red,
       ),
     ),
     body: Center(
       child: Text('Drawerの背景色を変更してみるよ！'),
     ),
   );
 }

これで背景色を変更することは可能です...がこのやり方だと透過させることはできないです。

ので次で透過させる方法を紹介していきます！

Drawerの背景色を透過させる方法

いよいよ本題です。上記GIFのように背景色を透過させる方法をみていきましょう。

やることは3つです。

①DrawerをThemeウィジェットで包容する。

②ThemeのdataプロパティにThemeDataウィジェットを追加する。

③ThemeDataのcanvasColorプロパティの指定をColors.transparentにする。

コードは以下です。

  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Drawer透過方法'),
     ),
     drawer: Theme(
       data: ThemeData(
         canvasColor: Colors.transparent,
       ),
       child: Drawer(),
     ),
     body: Center(
       child: Text('Drawerの背景色を透過してみるよ！'),
     ),
   );
 }

これでDrawerの背景を透過させることができます。

まとめ

以上がDrawerの背景色を透過させる方法でした。

ThemeDataのcanvasColorがDrawerの背景色を司っているようですね。

その初期値がColors.whiteの為、デフォルトでは背景が白くなっています。

自分の思い描くDrawerを実装してみてください！

以下コード全文

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'ハッチアウトスクール',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: Test(),
   );
 }
}

class Test extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Drawer透過方法'),
     ),
     drawer: Theme(
       data: ThemeData(
         canvasColor: Colors.transparent,
       ),
       child: Drawer(),
     ),
     body: Center(
       child: Text('Drawerの背景色を透過してみるよ！'),
     ),
   );
 }
}