4. 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), ), ); } }
これでソースコードをビルドするとボタンをタップするたびにcountが増えていき、 メッセージに「ボタンをcount回タップしました」というメッセージが表示されます。
ということでボタンの表示とタップ処理ができるようになりました。