Re:birth エンジニアリング

Flultterとテックブログと時々iOS

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

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

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),
      ),
    );
  }
}

f:id:qed805:20200116002440p:plain
ボタンをタップしてcountをふやしてメッセージを更新

これでソースコードをビルドするとボタンをタップするたびにcountが増えていき、 メッセージに「ボタンをcount回タップしました」というメッセージが表示されます。

ということでボタンの表示とタップ処理ができるようになりました。