Flutter入門

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

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

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

使用するウィジェット

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

基本的な書き方

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

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

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

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

実際に実装してみよう!

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

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

まとめ

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

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

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

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

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する