基本的なボタンの利用方法 RaisedButton

Material Design の Raised Button (contained button) は、Flutter では RaisedButton ウィジェットで実装されます。 平坦な見た目のボタンではなく、少し盛り上がったボタンです。盛り上がり量は Material.elevation プロパティで指定されます。

RaisedButton では child プロパティにウィジェットを、 そして onPressed プロパティにボタンをタップした時に実行されるハンドラを指定します。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {

  int count = 0;
  String _message = 'Tap this button.';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App 1'),
        ),
        body: Container(
          padding: EdgeInsets.all(30.0),
          child: Column(
            children: <Widget>[
              Text(_message),
              RaisedButton(
                child: Text('OK'),
                onPressed: _onPressed,
              )
            ],
          ),
        ),
      ),
    );
  }

  void _onPressed() {
    setState(() {
      ++count;
      _message = 'Tap count $count';
    });
  }
}

上のコードではボタンをタップするたびにカウンタをインクリメントしています。ラベルを再描画するために、 setState を呼び出しています。