Когда я прокручиваю экран, флажок снимается в приведенном ниже коде флаттера?

#flutter #dart

Вопрос:

Когда я прокручиваю экран, флажок снимается в приведенном ниже коде флаттера?

 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:

вы обнаружили эту проблему для использования setState inkwell при нажатии кнопки вниз inkwell , чтобы обновить значение. Поэтому вам следует обновить значение с checkBox помощью функции onchanged.

 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),
                )
              ],
            ),
          )),
    );
  }
}