ボタンの表示

ボタンの種類

主なボタンの種類です。

• FlatButton
• RaisedButton（影のあるボタン）
• OutlineButton（外枠のついたボタン）
• FloatingActionButton（アプリの主機能を起動させるボタン）

 

ボタンを押した時に実行する関数を記述する

ボタンが押された時に実行する関数を記述して使います。

 onPressed に関数名を記入します。

FloatingActionButton(
  onPressed: _counter, //ボタンが押された時に実行する関数名を指定
  tooltip: 'Increment',
  child: Icon(Icons.add),
),

 

 

関数の定義

ボタンが押された時に実行する関数を定義します。

下記の例は、ボタンが押される度に、変数 _count の値に1を足していく処理です。

 setState で囲むことで、画面の表示にも反映させます。

void _counter(){
  setState(() {
  _count = _count + 1;
  });
}

 

 

 

アイコンの変更

FloatingActionButtonのアイコンを変更できます。

 Icon の Icons.add の add 部分を変更します。

Flutter公式ドキュメントから好きなアイコンを探して変更します。

FloatingActionButton(
  onPressed: _counter,
  tooltip: 'Increment',
  child: Icon(Icons.add), //アイコン画像は変更できる
),

 

 

ボタン要素の全体を押せるようにする

ボタン全体を押せるようにするには、まず、

 FlatButton を SizedBox で囲みます。

 SizedBox の width を double.infinity に指定します。

SizedBox(
　　width: double.infinity,
　　child: FlatButton(
　　　　onPressed: _display,
       child: Text("スタート",
       　　textAlign: TextAlign.center,
           style: TextStyle(
             fontSize: 50,
           ),
       ),
    ),
),

 

 

ボタンを押すとカウントアップするアプリ

FloatingActionButtonを押す度にカウントアップするアプリです。

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ネコでもわかるFlutter大辞典'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _count = 0;

  void _counter() {
    setState(() {
      _count = _count + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("ボタンを押すとカウントアップします。"),
            FloatingActionButton(
              onPressed: _counter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            Text('$_count'),
          ],
        ),
      ),
    );
  }
}