Flutter,ボタンを押したらダイアログを表示する

2019年3月16日カテゴリー：Web系, モバイルアプリ開発, 技術系コメント : 0

１，はじめに

過去にFlutterについての記事を書いた。

だが、Flutterの動作確認のみにとどまり、開発をしていなかった。

今回DebianにFlutter開発環境を構築したので、ついでにFlutterで遊んでみた。

まずは、ボタンを押したらダイアログが表示されるものを作ってみたい。

DebianでFlutterが動いた！#debian #flutter pic.twitter.com/HcKehhRHD1
— jskny (@jskny_tw) March 16, 2019

２，各フェーズについて

（１）ボタンを表示

Flutterの開発経験に乏しいため、サンプルアプリのコードにくっついていた、
floatingActionButtonをそのまま使用する。

下記のコードにより画面にボタンが配置される。

// 画面の下にボタンをセット
floatingActionButton: FloatingActionButton(
  // ボタンアイコン
  child: Icon(Icons.alarm_add),
),
// とりま、中央寄せで配置する。
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

これにより、ボタンがアプリ上に表示される。

（２）ボタン押下時動作

次に、上記で作成したボタンが押下された場合の挙動についてコードを追加する。

floatingActionButton: FloatingActionButton(
  // ボタン押下時処理
  onPressed: () {
    // 何らかの処理
  },

  child: Icon(Icons.alarm_add),
),

（３）ダイアログを表示する

ボタンが押下された場合に、ダイアログを表示する。

// 画面の下にボタンをセット
floatingActionButton: FloatingActionButton(
  // ボタン押されたらダイアログ出そうか。
  onPressed: () {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title :Text("Hello !"),
        content: Text("Welcome to Flutter World !"),
      )
    );
  },

  child: Icon(Icons.alarm_add),
),

３，作成したコード

以上を踏まえて作製したアプリは、ボタンが押下されるとダイアログを出力する。

本アプリケーションのコードは下記の通りである。

import 'package:flutter/material.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: 'Hello World App',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Hello World'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello World !',
            ),
          ],
        ),
      ),

      bottomNavigationBar: BottomAppBar(
        // 画面の下に70pxの余白を作り、
        // アラートボタンが画面の下にくっつく見栄えの悪い現象を回避する。
        child: Container(height: 70.0,),
      ),

      // 画面の下にボタンをセット
      floatingActionButton: FloatingActionButton(
        // ボタン押されたらダイアログ出そうか。
        onPressed: () {
          showDialog(
            context: context,
            builder: (_) => AlertDialog(
              title :Text("Hello !"),
              content: Text("Welcome to Flutter World !"),
            )
          );
        },

        // アイコン
        child: Icon(Icons.alarm_add),
      ),
      // とりま、中央寄せで配置する。
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

４，おわりに

Flutter で開発する場合、全てウィジェットという考え方があるようだ。

当初、AlertDialogのtitleやcontentに普通に文字列をセットしたのだが、だめで悩んだ。

結局Textオブジェクトを使用すれば良いようだが、ようわからん。

クロスプラットホーム開発で有名とのことなので、勉強していきたい技術だなと思った。

５，参考文献

Tag : dart, Flutter 作成者 : jskny

Sysrigar