単純なCustomチェックボックスの作成-AnimatedContainer

完了する画面

使用する部品と技術は次のとおりです.
1)AnimatedContainerコンポーネント−状態変化に自然に応答し,ユーザ体験を向上させる.つまり、何も設定することなく状態を自然な連続アニメーションに変えることができる.
2)GetXによる状態変化

Widget _buildMissitonCompleteBox(int index) {
    return Obx(()=>GestureDetector(
      onTap: (){
        controller.updateMissionComplete(index);
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        width: controller.missionComplete[index]?33:32,
        height: controller.missionComplete[index]?33:32,
        decoration: BoxDecoration(
          border: controller.missionComplete[index]
              ?Border.all(color:Colors.green,width: 2)
              :Border.all(color:Colors.grey,width: 1.5),
          borderRadius: BorderRadius.circular(10),
        ),
        curve: Curves.linearToEaseOut,
        child: controller.missionComplete[index]?Icon(Icons.park,color: Colors.green,):null,

      ),
    ));
  }

特にありません.変えたい番組を3つの演算にすればいい!
例-サイズの変更
width:boolタイプ変数(getXコントローラで変更すべき)?true時の幅:false時の幅
onTapの場合,controller操作によりBoxのproperty値の変更に基づいたbool変数を変更する方法がある.