When I scroll the screen the checkbox get unselected in the below flutter code?

Viewed 75

When I scroll the screen the checkbox gets unselected in the below flutter code?

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

class LevelCard extends StatefulWidget {
  final _index;

  LevelCard(this._index);

  @override
  State<LevelCard> createState() => _LevelCardState();
}

class _LevelCardState extends State<LevelCard> {
  var _checkValue = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          _checkValue = true;
        });
      },
      child: GlassmorphicContainer(
          margin: EdgeInsets.all(5),
          width: 350,
          height: 350,
          borderRadius: 20,
          blur: 20,
          alignment: Alignment.bottomCenter,
          border: 2,
          linearGradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFFffffff).withOpacity(0.1), //0xFFffffff
                Color(0xFFFFFFFF).withOpacity(0.05), //0xFFFFFFFF
              ],
              stops: [
                0.1,
                1,
              ]),
          borderGradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFffffff).withOpacity(0.5),
              Color((0xFFFFFFFF)).withOpacity(0.5),
            ],
          ),
          child: Container(
            height: double.maxFinite,
            child: Column(
              children: [
                Container(
                  child: Checkbox(
                    shape: CircleBorder(),
                    activeColor: Colors.green[300],
                    value: _checkValue,
                    onChanged: (_) {},
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    (widget._index + 1).toString(),
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                      fontSize: 15,
                    ),
                  ),
                ),
                Text(
                  'Play',
                  style: TextStyle(color: Colors.black87),
                )
              ],
            ),
          )),
    );
  }
}
1 Answers

you found this problem for using setState in inkwell when you press for down inkwell update the value. So you should update the value from the checkBox onchanged function.

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

class LevelCard extends StatefulWidget {
  final _index;

  LevelCard(this._index);

  @override
  State<LevelCard> createState() => _LevelCardState();
}

class _LevelCardState extends State<LevelCard> {
  var _checkValue = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
       
      },
      child: GlassmorphicContainer(
          margin: EdgeInsets.all(5),
          width: 350,
          height: 350,
          borderRadius: 20,
          blur: 20,
          alignment: Alignment.bottomCenter,
          border: 2,
          linearGradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFFffffff).withOpacity(0.1), //0xFFffffff
                Color(0xFFFFFFFF).withOpacity(0.05), //0xFFFFFFFF
              ],
              stops: [
                0.1,
                1,
              ]),
          borderGradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFffffff).withOpacity(0.5),
              Color((0xFFFFFFFF)).withOpacity(0.5),
            ],
          ),
          child: Container(
            height: double.maxFinite,
            child: Column(
              children: [
                Container(
                  child: Checkbox(
                    shape: CircleBorder(),
                    activeColor: Colors.green[300],
                    value: _checkValue,
                    onChanged: (value) {
                    setState(() { // change needed here 
                      _checkValue = value;
                     });
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    (widget._index + 1).toString(),
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                      fontSize: 15,
                    ),
                  ),
                ),
                Text(
                  'Play',
                  style: TextStyle(color: Colors.black87),
                )
              ],
            ),
          )),
    );
  }
}
Related