【Flutter】ボタンタップでDrawerを開く方法を解説

今回は、FlutterのDrawerを何かしらのボタンをタップしたときに開くようにする方法を解説します。

Drawerを使いこなすためにぜひこの機会に学習していきましょう。

手順の確認
ScaffoldStateのGlobalKeyを設定
Drawerを実装
「openDrawer」メソッドを実行
おわりに

手順の確認

まずは実装のための手順を確認していきましょう。

やることは大きく3つです。

ScaffoldStateのGlobalKeyを設定
Drawerを実装
「openDrawer」メソッドを実行

順番に解説していきます。

今回は以下のようなデモコードを基に解説を進めていきます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('pRyogram'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Drawerを開く'),
          onPressed: () {

          },
        )
      ),
    );
  }
}

ScaffoldStateのGlobalKeyを設定

まずはScaffoldStateのGlobalKeyを変数として定義していきます。

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

実際に_MyHomePageStateクラス内に定義していきましょう。

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>(); //この行を追加
  @override
  Widget build(BuildContext context) {

次に定義した「_scaffoldKey」をbuild内のScaffoldウィジェットのkeyプロパティに適用していきます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey, //この行を追加
    appBar: AppBar(
      title: const Text('pRyogram'),
    ),

ここまでで第1ステップはクリアです。

Drawerを実装

次にDrawerの実装を行なっていきます。

ScaffoldのdrawerプロパティにDrawerウィジェットを追加することでDrawerを表示することができます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    drawer: const Drawer(), //この行を追加
    appBar: AppBar(
      title: const Text('pRyogram'),
    ),

この実装でAppBarの左側にDrawerを表示するアイコンが自動的に表示され、アイコンタップでDrawer が表示されます。

第2ステップクリアです。

「openDrawer」メソッドを実行

最後にボタンタップでDrawerを表示する機能を実装していきます。

Drawerを外部ボタンで開くには「openDrawer」メソッドを実行します。

具体的な実装コードは以下です。

_scaffoldKey.currentState!.openDrawer();

こちらをボタンタップの処理の中に追加します。

body: Center(
  child: ElevatedButton(
    child: const Text('Drawerを開く'),
    onPressed: () {
      _scaffoldKey.currentState!.openDrawer(); //こちらを追加
    },
  )
),

これでボタンタップでDrawerを開くことができます。