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);@overrideInterestItemState createState() => new InterestItemState(); }class InterestItemState extends State<InterestItem> {bool _checkvalue=false;@overrideWidget 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,),),),),)],),),);}@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}@overridevoid didUpdateWidget(InterestItem oldWidget) {// TODO: implement didUpdateWidgetsuper.didUpdateWidget(oldWidget);}@overridevoid didChangeDependencies() {// TODO: implement didChangeDependenciessuper.didChangeDependencies();} }

demo

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

總結

以上是生活随笔為你收集整理的Flutter 自定义CheckBox (用于兴趣爱好、风格选择)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。