2020.01.17 2020.08.03

4. Flutter におけるボタンウィジェットについて

tamappe

今回はFlutter で使えるボタンのウィジェットについて学習します。

Table of Contents

ButtonWidget の種類について

これまでのバックグラウンドがiOSエンジニアでしたのでiOSと比べてみます。

Flutter	iOS
FlatButton	UIButtonと同じ
RaisedButton	UIButtonが立体的に表示される
IconButton	Image付きのUIButtonと同じ
FloatingActionButton	AndroidのFABのように見えるが普通のボタンとしても使える
RawMaterialButton	ドロップシャドウの付いたUIButton?
FloatingActionButton	AndroidのFABのように見えるが普通のボタンとしても使える

FlatButton の基本形について

FlatButton のプロパティの例として、下記のサンプルコードを書いてみます。

// 状態を持つクラス
class _AWidgetState extends State<AWidget> {
  @override
  Widget build(BuildContext context) {
    FlatButton(
      // よく分かりません
      key: null,
      onPressed: _buttonPressed,
      // 背景色
      color: Colors.black12,
      // View
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Icon(
          Icons.android,
          size: 50.0,
        ),
      ),
    );
  }
  
  void _buttonPressed() {
    setState(() {
      // ボタンを押したときの処理
    });
  }
}

ビルドはしていませんが、これでFlatButtonが表示されてタップしたときの処理が書けます。
iOSのSwift では UIButton 表示まで色々な処理を書きますがFlutterではこれだけでボタンを表示・タップができます。

setState メソッドについて

_buttonPressed() メソッドの中でsetStateというメソッドを実行しています。
このsetStateはStateの更新をStateクラスに知らせる機能を持っています。

試しにFloatingActionButton をタップしてメッセージを更新させるサンプルコードを書いてみます。

main.dart

import 'package:flutter/material.dart';
import 'package:practice_app/sample_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final title = 'FloatingActionButtonのサンプルコード';
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter App',
      home: new SamplePage(
        title: this.title,
      ),
    );
  }
}

sample_page.dart

import 'package:flutter/material.dart';

// ウィジェット
class SamplePage extends StatefulWidget {
  final title;

  SamplePage({this.title}): super();
  _SamplePageState createState() => new _SamplePageState();
}

// 状態を持つクラス
class _SamplePageState extends State<SamplePage> {
  String _message;
  int _count;

  @override
  void initState() {
    super.initState();
    _message = 'Hello';
    _count = 0;
  }

  void _incrementCount() {
    setState(() {
      _count ++;
      _message = 'ボタンを$_count回タップしました';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(
        _message,
        style: TextStyle(fontSize: 16.0),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCount,
        tooltip: 'set Message',
        child: Icon(Icons.android),
      ),
    );
  }
}