[Flutter]チェツクボックスのチェツクがリセットされてしまうのを修正したい。

Question

前提・実現したいこと

スクロール操作によってチェックボックスのチェツクが外れてしまうのを解決したいです。

発生している問題・エラーメッセージ

一番下に乗せてあるソースコードの様な形でチェツクボックスを実装すると、チェツクボックスをチェツクした後、上の方にスクロールしてまたチェツクボックスに戻るとチェツクが消えている。

おそらくListView内のComfirmCheckBoxを囲っているContainerが画面内から無くなった時に表示データがリセットされているみたいですが、解決策がわからないです。（Containerで分けなかった場合はこの様なバグは起きませんでした。）

ただ、実際のコードでは部分的に背景色を変えるためにこの様なContainerで囲う様な構造でなければいけないため、解決策があれば教えて欲しいです。

該当のソースコード

Dart Padでも確認できる様になってますので、確認の際にご使用になってください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//画面-----------------------------------------------------
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _selectedPolicy2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child:ListView(
          children:[
            Container(
              height:30,
              child:Text("下のチェツク欄にチェックした後このへんまでスクロール"),
            ),
            SizedBox(height:50),
            Container(
              child:Column(
                children:<Widget>[
                  Container(height: 100,color: Colors.amber),
                  Container(height: 100,color: Colors.cyanAccent),
                  Container(height: 100,color: Colors.blue),
                  Container(height: 100,color: Colors.cyanAccent),
                  Container(height: 100,color: Colors.amber),
                  Container(height: 100,color: Colors.cyanAccent),
                  Container(height: 100,color: Colors.amber),
                  Container(height: 100,color: Colors.cyanAccent),
                  Container(height: 100,color: Colors.amber),
                  Container(height: 100,color: Colors.cyanAccent),
                  Container(height: 100,color: Colors.amber),
                  Container(height: 100,color: Colors.cyanAccent),
                ]
              )
            ),
            Container(
              height:100,
              child:ConfirmCheckBox(
                    title:"同意",
                    onValueSelected:(value){
                      _selectedPolicy2 = value;
                    },
                  ),
            ),
          ]
        )
      )
    );
  }
}
//チェツクボックス------------------------------------
class ConfirmCheckBox extends StatefulWidget {
  ConfirmCheckBox({
    this.title = "",
    this.position = ListTileControlAffinity.leading,
    this.margin = EdgeInsets.zero,
    this.onValueSelected,
  });
  final String title;
  final ListTileControlAffinity position;
  final EdgeInsets margin;
  final Function(bool) onValueSelected;
  @override
  _ConfirmCheckBoxState createState() => _ConfirmCheckBoxState();
}

class _ConfirmCheckBoxState extends State<ConfirmCheckBox> {
  var checkBox = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: widget.margin,
      child: CheckboxListTile(
        value: checkBox,
        title:Text(widget.title),
        controlAffinity: widget.position,
        onChanged:(bool value){
          setState((){
            checkBox = value;
            widget.onValueSelected(value);
          });
        }
      )
    );
  }
}

Answer 1

ConfirmCheckBoxが状態を持っている設計はお勧めしません。
_MyHomePageStateにbool _didConfirm等の状態を持って、
...と書いている途中で気づいたのですが_selectedPolicy2というのが既にあるので、
ConfirmCheckBoxでcheckBoxを持っている必要がありません。
StatelessWidgetに単純化してisSelected等の引数を渡せるようにすると
いいと思います。

            Container(
              height:100,
              child:ConfirmCheckBox(
                    title:"同意",
                    isSelected: _selectedPolicy2,
                    onValueSelected:(value){
                      setState({
                        _selectedPolicy2 = value; 
                      });
                    },
                  ),
            ),

こんな感じでしょうか。