【Flutter】CheckBoxをサイズを大きく調整する

2023年7月19日2023年7月21日

FlutterのCheckBoxのサイズを大きく(小さく)調整する方法を紹介します。

CheckBoxの基本的な使い方、知っておきたい基本プロパティのまとめ記事はこちら↓

CheckBoxのサイズを調整する方法

CheckBoxにはチェックボックスのサイズを変更するプロパティがないので、代わりにTransform.scaleウィジェットを使用できます。

Transform.scale()のscaleの引数にdouble値を渡して表示サイズの倍率を調整します。下のサンプルコードではCheckBoxのサイズを４倍にしています。

Transform.scale(
  scale: 4,
  child: Checkbox(
    value: _isChecked,
    onChanged: (newValue) {
      setState(() {
        _isChecked = newValue!;
      });
    },
  ),
),

アウトプット（左側）

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const CheckboxExample(),
      ),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  const CheckboxExample({super.key});

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  var _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Transform.scale(
        scale: 4,
        child: Checkbox(
          value: _isChecked,
          onChanged: (newValue) {
            setState(() {
              _isChecked = newValue!;
            });
          },
        ),
      ),
    );
  }
}

【Flutter】CheckBoxをサイズを大きく調整する

CheckBoxのサイズを調整する方法

アウトプット（左側）

サンプルコード

合わせて読みたい

参考サイト