【Flutter】ドロワー(Drawer)実装【日本語】

Flutterでドロワー(Drawer)を作成してみた。

オマケでヘッダー付きのリッチなドロワーとか、ドロワーのヘッダの高さ(Height)を変える方法もメモ。

他のプログラミングに関する記事はこちら

スポンサーリンク

左側から出るドロワー実装

左側から出るドロワー実装をするためには、appBarとかがある階層にDrawerというのを作成すればOKです。

以下コードの16~20行目が該当します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("ドロワーテスト")
        ),
        drawer: Drawer(
          child: Center(
            child: Text("ドロワー内容"),
          )
        ),
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

Drawerで作成したchild内の記載がドロワーの内容になります。

上記例だと、中央寄せにした「ドロワー内容」というテキストがドロワーの中身となります。

実際にはこんな感じになります。

スポンサーリンク

右側から出るドロワー実装

右側から出るドロワー実装をするためには、左側から出るドロワー実装時に使った「drawer」を「endDrawer」に変えるだけです。

以下コードの16行目、「drawer」から「endDrawer」になっているのが注目ポイントです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("ドロワーテスト")
        ),
        endDrawer: Drawer(
          child: Center(
            child: Text("ドロワー内容"),
          )
        ),
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

実際にはこんな感じになります。

スポンサーリンク

リッチなドロワー作成

リッチなドロワーを作りたい場合は、ただドロワーの中身を作り込んでいけばいいだけの話ですが、ドロワー内を作り込んでいく場合、基本的には「ListView」という機能を使うのが良いそうです。

そして、ドロワーにヘッダーを付けたい場合は「DrawerHeader」というものを使うそうです。

とりあえず以下のようなものを作ってみました。

 

ソースコードは以下の通り、16~38行目が作り込んだ部分です。

ListViewのchildrenに、上から順番に「DrawerHeader」「(好きな数の)ListTile」を並べているだけ。簡単。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("ドロワーテスト")
        ),
        endDrawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text("ヘッダーだよ"),
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
              ),
              ListTile(
                title: Text("ボタン1"),
                trailing: Icon(Icons.arrow_forward),
              ),
              ListTile(
                title: Text("ボタン2"),
                trailing: Icon(Icons.arrow_forward),
              ),
              ListTile(
                title: Text("ボタン3"),
                trailing: Icon(Icons.arrow_forward),
              ),
            ]
          )
        ),
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

スポンサーリンク

ドロワのヘッダの高さ調整

ドロワーにヘッダーを付けたい場合は「DrawerHeader」を使えばいいのはわかったけど、標準の設定で使うと高さが高すぎて見栄えが悪い気がします。

その場合、DrawerHeaderをContainerで囲んで、Containerのheightを設定すればいいらしいです(以下19~27行目)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("ドロワーテスト")
        ),
        endDrawer: Drawer(
          child: ListView(
            children: <Widget>[
              Container(
                height: 60.0,
                child: DrawerHeader(
                  child: Text("ヘッダーだよ"),
                  decoration: BoxDecoration(
                    color: Colors.orange,
                  ),
                ),
              ),
              ListTile(
                title: Text("ボタン1"),
                trailing: Icon(Icons.arrow_forward),
              ),
              ListTile(
                title: Text("ボタン2"),
                trailing: Icon(Icons.arrow_forward),
              ),
              ListTile(
                title: Text("ボタン3"),
                trailing: Icon(Icons.arrow_forward),
              ),
            ]
          )
        ),
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

結果が以下の通り。

ドロワーにヘッダをつけるのであれば高さを調整した方が見栄えがいいですね。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク