【Flutter/Dart⑥】インタラクティブなWidgetについて

さあ今回は”インタラクティブなWidget”の使い方について学んでいこう!!

前回までは”レイアウト”についてまとめてきました👇

【Flutter/Dart⑤】Flutterのレイアウトについて

レイアウトを表現するWidgetは本当に数多くの種類が存在しますが、インタラクティブなWidgetの同じことが言えます。
全て覚える必要はなく、一度そのWidgetを作ってみて知ることで実装の引き出しを増やすことが大切だと思います。動きをしっかり理解し、”まずは触ってみる“をどんどん実践していこう!

Button

✅基本的なボタン表示用Widgetとしては以下の3種類があります。

  1. TextButton:影のないボタン
  2. OutlinedButton:枠線のあるボタン
  3. Elevated Button:影のあるボタン

👇3つのボタンの実装例になります

👇ボタンをクリックすると数字がインクリメントされるコードの実装例です。

※余談ですが、GitHub GistとDartPadを連携させることによりこのようにWordPressに埋め込むことができます👇

IconButton

✅アイコンボタンの実装は” IconButton “を使う
✅アイコンボタンにテキストを埋め込んでの実装は以下の3つ
 ① TextButton.icon
 ② OutlineButton.icon
 ③ ElevatedButton.icon

👇Iconボタン、テキストを埋め込んだアイコンボタンの実装例です

FloatingActionButton

✅ マテリアルデザインを採用したフローティングボタンは” FloatingActionButton “を使う

👇フローティングアイコンボタンの実装例です

TextField

👇キーボードで入力し、表示させるアプリケーションの実装例です

Switch

👇 スイッチを押すと、アイコン表示を変化させるアプリケーションの実装例です。

Slider

  • label: スライダーを動かしている時に表示されるラベル
  • min: 最小値
  • max: 最大値
  • value: スライダーの値(double)
  • activeColor: スライダーの選択範囲の線の色
  • inactiveColor: スライダーの未選択範囲の線の色
  • divisions: メモリの数値を決めるための値で、(max - min) / divisionsの計算で値が決定
  • onChanged: 値を変更した時に動作
  • onChangeStart: 値を変更開始した時に動作
  • onChangeEnd: 値を変更終了した時に動作

👇スライドを動かすと、表示してる値が増えていくアプリケーションの実装例です

“【Flutter/Dart⑥】インタラクティブなWidgetについて”は以上になります、いかがだったでしょうか?

次回は”画面遷移”について学習していきたいと思います、楽しみにしてて下さいね!

今回はこの辺で、ばいばい👋