Widgetについて学んでみる②

Checkbox ListTileの使い方｜チェックボックスをListTileとして表示

Flutterでアプリを作るときは、TodoListから始まったりする。
UIの作り方が、まだよく分かっていないので部品を作るところから勉強してみることにしました。
以前はUdemyでHive使ってTodoList作ってみたが、削除機能つけるところがすごく微妙だった...

こちらがサンプル

import 'package:flutter/material.dart';

// アロー関数で書いてみた!
void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const String titleText = "CheckBox"; // タイトルの定数
  bool isChecked = false; //bool型の変数を作っておく

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(titleText),
        ),
        body: Center(
          // Themeとは子以下のWidgetにテーマを適用するためのクラス
          child: Theme(
              data: Theme.of(context)
                  .copyWith(unselectedWidgetColor: Colors.orangeAccent),
              child: CheckboxListTile(
                title: const Text('CheckList'),
                secondary: const Icon(Icons.face_retouching_off),
                controlAffinity: ListTileControlAffinity.leading,
                tileColor: Colors.green[100],
                value: isChecked,
                onChanged: (value) {
                  setState(() {
                    isChecked = value!;
                  });
                },
                // チェックされたときの色
                activeColor: Colors.red[600],
                // チェックされていないときの色
                checkColor: Colors.white,
              )),
        ),
      ),
    );
  }
}

おまけ

以前flutter_slidableのバージョンが上がったせいかコピペでリストに機能を実装できなかったので嫌な思いをしたが今回は調べながら、作ってみたら最新バージョンでもうまくいった!
main.dart

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

// アロー関数で書いてみた!
void main() => runApp(const MyApp());
// StatefulWidgetに変更
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  // staticプロパティで定義しないと使えない
  static const titleName = 'Slidable';

  @override
  State<MyApp> createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    // MaterialAppでScaffoldをラップする
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(MyApp.titleName),
        ),
        // bodyの中にSlidableを書く
        body: Slidable(
          endActionPane: ActionPane(
            motion: const DrawerMotion(),
            children: [
              // シェアボタン
              SlidableAction(
                onPressed:(value) {},
                backgroundColor: Colors.blue,
                icon: Icons.share,
                label: 'シェア',
                ),
              // 削除ボタン
              SlidableAction(
                onPressed: (value) {},
                backgroundColor: Colors.red,
                icon: Icons.delete,
                label: '削除',
              ),
            ],
          ),
            // リストのタイトル
          child: CheckboxListTile(
                title: const Text('CheckList'),
                secondary: const Icon(Icons.face_retouching_off),
                controlAffinity: ListTileControlAffinity.leading,
                tileColor: Colors.green[100],
                value: isChecked,
                onChanged: (value) {
                  setState(() {
                    isChecked = value!;
                  });
                },
                // チェックされたときの色
                activeColor: Colors.red[600],
                // チェックされていないときの色
                checkColor: Colors.white,
              )),
        ),
      );
  }
}