Flutter 自定义CheckBox (用于兴趣爱好、风格选择)

效果图

代码

Custom_CheckBox.dart

/**
 * @Title:
 * @Package
 * @Description: 兴趣Item
 * @author A18ccms A18ccms_gmail_com
 * @date
 * @version V1.0
 */

import 'package:flutter/material.dart';
import 'package:fluttertestdemo/services/ScreenAdapter.dart';

class InterestItem extends StatefulWidget {

  final String item;
  final String images;
  InterestItem({Key key,this.item,this.images}):super(key:key);


  @override
  InterestItemState createState() => new InterestItemState();
}

class InterestItemState extends State<InterestItem> {

  bool _checkvalue=false;


  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);
    var itemWidth=(ScreenAdapter.getScreenWidth()-ScreenAdapter.width(100))/2;
    return InkWell(
      onTap: () {
        setState(() {
          _checkvalue=!_checkvalue;
        });
        print(_checkvalue);
      },
      child: Container(
        width: itemWidth,
        height: ScreenAdapter.height(300),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(widget.images),
                fit: BoxFit.cover
            ),
            borderRadius: BorderRadius.circular(10)
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              left: ScreenAdapter.width(30),
              bottom: ScreenAdapter.height(20),
              child: Text(widget.item),
            ),
            Positioned(
              right: ScreenAdapter.width(30),
              top: ScreenAdapter.height(20),
              child: InkWell(
                onTap: () {
                  setState(() {

                  });
                },
                child: Container(
                  width: ScreenAdapter.height(40),
                  height: ScreenAdapter.width(40),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _checkvalue?Colors.pinkAccent:Colors.white10,
                      border: Border.all(color: _checkvalue?Colors.white10:Colors.white,width: 1)
                  ),
                  child: Center(
                    child: Icon(
                      Icons.check,
                      size: ScreenAdapter.size(30),
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(InterestItem oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}

demo

https://gitee.com/wizard-cc/flutter__test_demo.git