【学習メモ：Flutter入門編】Buttonの使い方

これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。

■ Button（ボタン）
ボタンを押すと、Dart言語で作成した対応する「関数」が呼び出されている。
関数のことを調べたければ「Dart」で調べる方が良い。

ボタンの種類は下記等が存在する。

• ElevatedButtton（エレベーテッドボタン）
• TextButton（テキストボタン）
• OutlinedButton（アウトラインドボタン）
• IconButton（アイコンボタン）
• FloatingActionButton（フローティングアクションボタン）
• DropdownButton（ドロップダウンボタン）
• PopupMenuButton（ポップメニューボタン）

なお、下記のボタンは古くなったので新しいボタンを使うように注意する。

• FlatButton ⇒ TextButton
• RaisedButton ⇒ ElevatedButtton
• OutlineButton ⇒ OutlinedButton

■ 関数の種類
【普通の関数】

★★★★★() {
}

【無名関数】

() {
}

【アロー関数】

() =>

■ ボタンと関数の関連付け方
オリジナルの関数を作成後、作成したボタンの「onPressed」項目に登録を行う。

【例】

buttonClick() {
  debugPrint('プッシュありがとう！！');
}

final button = ElevatedButton(
  onPressed: buttonClick,
  child: Text('プッシュ！')
);

表示された下記のようなボタンをクリックすると「buttonClick」関数が呼び出される。

■ ボタンのスタイルを変更
「style」という項目を定義する事で、お好みのスタイルに変更が可能。

【例】

final button = ElevatedButton(
  onPressed: buttonClick,
  child: Text('プッシュ！'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white
  ),
);

■ 押せないボタンの作成
「onPressed」という項目に対して「null」を設定する事で実現が可能。

最後に

Flutter（Dart言語）に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。

【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。