2021/2/23 CheckboxListTile（Flutter Widget of the Week）の訳

Whenever you accomplish something, it’s rewarding to be able to check it off.

完了時にチェックマークで外せると 満足感があるものですが

There’s never just one thing to do though,

すべきことは常にいくつもあるので

and these checkboxes usually come in a list.

チェックボックスは 大抵リストになります

One option is to take the Checkbox widget,compose it together with some other widgets,and pop it into a list.

Suddenly, this starts to feel familiar, almost like it’s a tile within a list.

お気づきでしょうが、これはリスト内のタイルと似ていますよね。

This is a perfect place for the CheckboxListTile widget.

ここで最適なのが CheckboxListTileウィジェットです。

CheckboxListTile combines two widgets: Checkbox and ListTile.

CheckboxListTileは CheckboxとListTile ２つのウィジェットの組み合わせですが、

But instead of simply making the leading or trailing widget a Checkbox,
it also makes it so that tapping anywhere in the ListTile toggles the Checkbox.

単に先端か後端のウィジェットを チェックボックスにするだけでなく、ListTile内をどこでもタップすれば チェックボックスを切り替えられるようにします。

The constructor for CheckboxListTile looks suspiciously like a combination of Checkbox and ListTile.

CheckboxListTileのコンストラクターは、CheckboxとListTileの組み合わせのように見えます。

You provided a title for the text of the tile, and you used secondary to set what the widget on the other side of the tile should be.

titleフィールドに、「タイルに表示する文字列」を設定します。

そしてsecondaryフィールドに、タイルの反対側に配置するウィジェットをセットします。

CheckboxListTile(
  title: Text("Check! Mate?"),
  secondary: Icon(Icons.beach_access),
)

In a ListTile, this might be the leading or trailing parameters,but in a CheckboxListTile, one of those will always be a Checkbox.

これはListTileではleadingか trailingパラメータに設定できますが、

ListTileControlAffinity.leadingか trailingかplatformを渡すと、Checkboxを先端か後端か プラットフォームの通常の位置へ配置します。

CheckboxListTile doesn’t maintain any state itself,
and so you’ll often find it within another stateful widget.

CheckboxListTileは、状態(state)自体を保持しません。

そのため、別のステートフルウィジェット内にあることがよくあります。

That way, whether or not the box is checked can be maintained as a bit of state with the value property and modified with CheckboxListTiles onChanged callback.

このようにすれば、ボックスがチェックされているかどうかは、valueプロパティに設定した状態(state)として保持し、CheckboxListTileのonChangedフィールドに設定したコールバックで変更できます。

Finally, if you don’t like the default colors provided by your apps theme,you can override them with activeColor and checkColor.

最後に アプリのテーマで与えられた デフォルトの色を変えたいなら、activeColorとcheckColorで 上書きできます

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(home: MyApp()),
  );
}

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

class _MyAppState extends State<MyApp> {
  List<bool> listChecked = [
    false,
    false,
    false,
    false,
  ];

  /*
  bool _checked1 = false;
  bool _checked2 = false;
  bool _checked3 = false;
  bool _checked4 = false;

   */

  /*
  Function setChecked(int n) {
    return (bool value) {
      setState(() {
        listChecked[n] = value;
      });
    };
  }

   */

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          buildCLT(
            context,
            0,
            "[0]基本練習(パス)",
            "10分",
            Colors.red,
            //setChecked(0),
            listChecked[0],
          ),
          buildCLT(
            context,
            1,
            "[1]基本練習(ドリブル)",
            "10分",
            Colors.blue,
            //setChecked(1),
            listChecked[1],
          ),
          buildCLT(
            context,
            2,
            "[2]鳥カゴ",
            "20分",
            Colors.green,
            //setChecked(2),
            listChecked[2],
          ),
          buildCLT(
            context,
            3,
            "[3]ミニゲーム",
            "30分",
            Colors.yellow,
            //setChecked(3),
            listChecked[3],
          ),
          SizedBox(
            height: 30.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              buildContainer(0),
              buildContainer(1),
              buildContainer(2),
              buildContainer(3),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildContainer(int n) {
    return Container(
      width: 50.0,
      height: 100.0,
      color: listChecked[n] ? Colors.cyanAccent : Colors.grey,
      child: Center(child: Text(n.toString())),
    );
  }

  Widget buildCLT(
    BuildContext context,
    int menuNo,
    String title,
    String subtitle,
    Color color,
    //Function setter,
    bool value,
  ) {
    return Container(
      color:listChecked[menuNo] ? Colors.cyanAccent[100] : Colors.pinkAccent[100],
      child: CheckboxListTile(
        title: Text(title),
        subtitle: Text(subtitle),
        secondary: IconButton(
          color:Colors.orangeAccent,
          splashColor:Colors.deepPurple,
          icon: Icon(
            Icons.chevron_right_rounded,
            size:40,
          ),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => NextPage(),
              ),
            );
          },
        ),
        controlAffinity: ListTileControlAffinity.leading,
        value: value,
        //onChanged: setter,
        onChanged: (bool value) {
          setState(() {
            listChecked[menuNo] = value;
          });
        },
        activeColor: color,
        checkColor: Colors.black,
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(color: Colors.lightGreen),
    );
  }
}