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

Flutter

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

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

スポンサーリンク

手順の確認

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

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

  1. ScaffoldStateのGlobalKeyを設定
  2. Drawerを実装
  3. 「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を開くことができます。

おわりに

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

Drawerを開く挙動を制御する方法を知っていれば色々な動線でDrawerを活用していくことができるようになります。ぜひご自身のアプリアプリ開発に活かしてくだい。

当ブログだはプログラミング学習に関する記事を執筆しております。Flutterでランダムな文字列を生成する方法など、他にもFlutterの学習に関するコンテンツを執筆しております。

ぜひ合わせてご覧ください。

最後までご覧いただきありがとうございました。

コメント

タイトルとURLをコピーしました