【Flutter】CheckboxListTileに枠線を追加する方法

2024年1月27日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

CheckboxListTileに基本的な枠線を追加する方法
カスタムな枠線をCheckboxListTileに適用する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

FlutterのCheckboxListTileは便利なウィジェットですが、デフォルトでは枠線が付いていません。この記事では、初心者向けにCheckboxListTileに簡単に枠線を追加する方法を紹介します。ソースコードを交えながら、2つの手法をわかりやすく解説します。

方法1: shape引数を利用した基本の枠線追加

shape引数を使用して、CheckboxListTileに基本的な枠線を追加します。

Dart

CheckboxListTile(
  shape: RoundedRectangleBorder(
    side: BorderSide(), // デフォルトの枠線を追加
  ),
  title: Text('リストタイル'),
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = !_isChecked;
    });
  },
),

シンプルな設定で、すぐに枠線が適用されます。

カスタム枠線を追加する

shape引数とBorderSideを使って、カスタムの枠線を追加します。

Dart

CheckboxListTile(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.blue, // カスタムの枠線色を指定
      width: 2.0, // カスタムの枠線の太さを指定
    ),
    borderRadius: BorderRadius.circular(8.0), // 角丸を追加
  ),
  title: Text('リストタイル'),
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = !_isChecked;
    });
  },
),

枠線の色や太さ、角丸などを自由に設定できます。