Flutterで簡単に実装できるDrawerと国旗表示アプリ

markdown-img-paste-20210708062103800.webp
目次

はじめに

Flutterを使用したアプリ開発では、簡単にナビゲーションドロワー(Drawer)を実装できます。今回は、FlutterでDrawerを実装し、国旗を表示・非表示にする簡単なアプリを作成してみましょう。このアプリは、ドロワー内のスイッチで国旗の表示を切り替えることができます。

コード解説

  1. Drawerの追加: drawerendDrawer を使って、画面の左側や右側から表示するDrawerを追加します。

  2. 国旗表示の追加: flag パッケージを使用して、国旗を表示するコードを追加します。

  3. スイッチの追加: SwitchListTile を使って、ドロワー内にスイッチを追加します。このスイッチで国旗の表示を切り替えることができます。

  4. _active 変数を使って、国旗の表示・非表示を制御します。setState() を使用して、スイッチの状態が変更されたときに _active 変数を更新し、国旗の表示を切り替えます。

実際に進めていきます。

flutter create drawer

作成したプロジェクトでDrawerを追加したい画面のレイアウトで下記を追加します。

drawer: Drawer(child: Center(child: Text("なんか"))),

実際に書くとこのような形になります。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
+    drawer: Drawer(child: Center(child: Text("ひょっこりはん"))),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}
}

実行結果

実行して、画面左からスワイプするとこのような画面になります。

右からも出したい場合

endDrawer: Drawer(child: Center(child: Text("右から")))

drawerの代わりにendDrawerを使うと右から出すこともできます。 当然併記すれば両方からだすこともできます。

Drawer内でFlagを立てるとフラッグを表示してみる。

画像を貼り付けても良いですが、各国の国旗を出力できるパッケージがあるのでそちらを使用します。

flag

flutter pub add flag

Flutterプロジェクトに追加します。

日本国の国旗を表示する場合このように書きます。

この2つをインポートしてFlag.fromCodeを呼び出します。

import 'package:flag/flag.dart';
import 'package:flutter/cupertino.dart';
Flag.fromCode(
              FlagsCode.JP,
              height: 300,
),

フラッグ表示の実装例

先程まで作ってきたアプリに国旗表示部分を追加します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'フラグを立てるとフラッグが出てくる',
          ),
+          Flag.fromCode(
+            FlagsCode.JP,
+            height: 300,
+          ),
        ],
      ),
    ),
    drawer: Drawer(child: Center(child: Text("ひょっこりはん"))),
    endDrawer: Drawer(child: Center(child: Text("右から"))),
  );
}
}

実行結果

日本国の国旗が表示されました。

 Switchを使ってフラグを建てたり落としたりします。

Flutter Doc JP Switch 説明記事はここがわかりやすいと思います。

endDrawerの中にSwitchを追加してみましょう。

Class内にSwitchの状態を保存する変数を作っておきます。

bool _active = false;
endDrawer: Drawer(
          child: ListView(children: <Widget>[
        SwitchListTile(
          title: Text("国旗表示"),
          subtitle: Text("日本国の国旗を表示してみよう"),
          value: _active,
          secondary: Icon(Icons.star, color: Colors.teal),
          onChanged: (bool value) {
            setState(() {
              _active = value;
            });
          },
        )

実行結果

endDrawerを引っ張り出すと、トグルスイッチが追加されているかと思います。

フラグを立てたらフラッグが出てくるアプリ

先程作った_activeフラグを用いて動的に国旗表示をやっていきます。 といってもif文を国旗を表示している部分に追加しただけですが…

if (_active == true)
if (_active == true)
              Flag.fromCode(
                FlagsCode.JP,
                height: 300,
              ),

実行結果

初期画面

スイッチ・オン

国旗を表示!!!

コード全文

今回使用したコードは最終的にこのような形になりました。

import 'package:flutter/material.dart';
// import 'package:example/restart_widget.dart';
import 'package:flag/flag.dart';
import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _active = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'フラグを立てるとフラッグが出てくる',
            ),
            if (_active == true)
              Flag.fromCode(
                FlagsCode.JP,
                height: 300,
              ),
          ],
        ),
      ),
      drawer: Drawer(child: Center(child: Text("ひょっこりはん"))),
      endDrawer: Drawer(
          child: ListView(children: <Widget>[
        SwitchListTile(
          title: Text("国旗表示"),
          subtitle: Text("日本国の国旗を表示してみよう"),
          value: _active,
          secondary: Icon(Icons.star, color: Colors.teal),
          onChanged: (bool value) {
            setState(() {
              _active = value;
            });
          },
        )
      ])),
    );
  }
}

まとめ

今日はシンプルながら実用的な知見が得られました。 drawerはアプリを作っていく上で、使用感の向上に役立つ便利な子です。 可愛がって行きたいものですね。

Related Post

> Flutterで簡単に実装できるDrawerと国旗表示アプリ
FlutterでGoogle Mapにピンを立てて周辺のラーメン屋情報を表示するアプリの作り方
> Flutterで簡単に実装できるDrawerと国旗表示アプリ
FlutterでSpeed Dialボタンを実装してみよう
> Flutterで簡単に実装できるDrawerと国旗表示アプリ
Flutterでの様々なエラー対処法まとめ
> Flutterで簡単に実装できるDrawerと国旗表示アプリ
Yahoo APIを使って周辺の飲食店を検索しよう
> Flutterで簡単に実装できるDrawerと国旗表示アプリ
FlutterでJSONを詰め込むための構造体を簡単に作る方法
> Flutterで簡単に実装できるDrawerと国旗表示アプリ
FlutterでProviderパターンを使ってUIとロジックを分離する方法

おすすめの商品

>