add styled checkbox

null_safety
小赖 4 years ago
parent e6f16adff2
commit 187635bc94

@ -25,6 +25,16 @@ class _ExampleBoxState extends State<ExampleBox> {
}); });
}, },
), ),
ListTile(
leading: ASCheckBox.checkStyle(value: _state),
title: Text('CheckBox'),
subtitle: Text('with styled'),
onTap: () {
setState(() {
_state = !_state;
});
},
),
], ],
), ),
); );

@ -3,15 +3,21 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
class ASCheckBox extends StatefulWidget { class ASCheckBox extends StatefulWidget {
final bool value; final bool value;
ASCheckBox({Key key, this.value = false}) : super(key: key); final bool checkStyle;
ASCheckBox({Key key, this.value = false})
: checkStyle = false,
super(key: key);
ASCheckBox.checkStyle({Key key, this.value = false})
: checkStyle = true,
super(key: key);
@override @override
_ASCheckBoxState createState() => _ASCheckBoxState(); _ASCheckBoxState createState() => _ASCheckBoxState();
} }
class _ASCheckBoxState extends State<ASCheckBox> { class _ASCheckBoxState extends State<ASCheckBox> {
@override _renderDefault() {
Widget build(BuildContext context) {
return Container( return Container(
height: 17.w, height: 17.w,
width: 17.w, width: 17.w,
@ -35,4 +41,36 @@ class _ASCheckBoxState extends State<ASCheckBox> {
), ),
); );
} }
_renderCheck() {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
curve: Curves.fastOutSlowIn,
height: 27.w,
width: 27.w,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFD5D5D5),
width: widget.value ? 0 : 1.w,
),
borderRadius: BorderRadius.circular(27.w),
color: Color(0xFFFFBD32).withOpacity(widget.value ? 1 : 0),
),
child: AnimatedOpacity(
duration: Duration(milliseconds: 300),
curve: Curves.fastOutSlowIn,
opacity: widget.value ? 1 : 0,
child: Icon(
Icons.check,
size: 18.w,
),
),
);
}
@override
Widget build(BuildContext context) {
return widget.checkStyle ? _renderCheck() : _renderDefault();
}
} }

Loading…
Cancel
Save