【5分でわかる】チェックボックス(Checkbox)を実装する | Flutter入門

本記事では、Flutterでチェックボックスを実装する方法を解説していきます。

チェックボックス(Checkbox)を実装する方法

使用するウィジェット

Flutterでは、Checkboxウィジェットが用意されていますのでこちらを使用しましょう。

Checkbox class - material library - Dart API

API docs for the Checkbox class from the material library, for the Dart programming language.

基本的な書き方

以下のように記述することで実装できます。

Checkbox(
    activeColor: Colors.blue, // Onになった時の色を指定
    value: _flag, // チェックボックスのOn/Offを保持する値
    onChanged: _handleCheckbox, // チェックボックスを押下した際に行う処理
)

注意なのは、チェックボックスのOn/Offは特定の変数を参照して行います。

変数の状態を保持する必要があるので、Stateful Widgetで実装するようにしてください。

実際に実装してみよう!

Flutterのデフォルトのカウンターアプリを書き換えていきましょう。

main.dartを以下のように変更してください。

まとめ

チェックボックスは、よくあるUI表現の一つです。

この機会にしっかりと習得しましょう！

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

2022年 Flutterの学習方法(学習サイト5選) ども、木村です。本業はデータサイエンティスト。副業でアプリ開発をしています。 本記事では、効率的なFlutterの学習方法につい...

Flutterを動画で学習する

2022年 Flutterの入門学習におすすめのUdemy教材 7選 ども木村です。本業ではデータサイエンティスト、副業でアプリ開発をしています。 本記事では、Flutterの入門学習におすすめのU...

Flutterを書籍で学習する

【厳選】Flutterに入門できる書籍 3選 ども、木村です。本業ではデータサイエンティスト。副業で個人でアプリ開発をしています。 いまやクロスプラットフォームの主力となりつ...