Udemyセール開催中! 対象コースが1,220円から

【Flutter】Checkboxの使い方|チェックボックスの作成・ボーダー色の変更

今回は「Checkbox」の基本的な使い方について紹介します。

Checkboxを使えばシンプルなチェックボックスを作成できます。またチェックボックスのボーダー色の変更方法についても紹介していきます。

目次

Checkboxの使い方

isChecked = true
isChecked = false
class _MyAppState extends State<MyApp> {
  bool isChecked = false; //bool型の変数を作っておく

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Checkbox(
            value: isChecked,
            onChanged: (value) {
              setState(() {
                isChecked = value!;
              });
            },
          ),
        ),
      ),
    );
  }
}

Checkboxを使用するにはbool型の変数を定義しておき、valueプロパティに定義した変数を渡します。そして上記コードのようにonChangedプロパティのsetStateで変数のbool値を変更します。

チェックボックスの装飾・ボーダー色を変更

isChecked = true
isChecked = false
//省略...
body: Center(
  child: Theme(
    data: Theme.of(context)
        .copyWith(unselectedWidgetColor: Colors.orangeAccent),
    child: Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value!;
        });
      },
      activeColor: Colors.red,
      checkColor: Colors.white,
    ),
  ),
),

チェックボックスのボーダー色を変更するには、上記コードのようにThemeでCheckboxをラップしてdataプロパティで色を指定します。「Colors.orangeAccent」のところを好きな色に変更すればOKです。

またチェックボックスがアクティブ状態のボックス色、チェックマークの色はCheckboxのプロパティで指定できます。

activeColorvalueが「true」の時のチェックボックスの色
checkColorチェックマークの色

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Theme(
            data: Theme.of(context)
                .copyWith(unselectedWidgetColor: Colors.orangeAccent),
            child: Checkbox(
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  isChecked = value!;
                });
              },
              activeColor: Colors.red,
              checkColor: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる