How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey.
CheckBox's border color comes from unselectedWidgetColor
of your ThemeData
.
Add following ThemeData
to your MaterialApp
MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
unselectedWidgetColor: Colors.red, // <-- your color
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
If you don't want to add color to the MaterialApp
's ThemeData
then you can wrap your CheckBox
widget with Theme
widget, following is the code for your reference:
Theme(
child: Checkbox(
value: false,
onChanged: (_) {},
),
data: ThemeData(
primarySwatch: Colors.blue,
unselectedWidgetColor: Colors.red, // Your color
),
),
Use this:
Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
side: MaterialStateBorderSide.resolveWith(
(states) => BorderSide(width: 1.0, color: Colors.red),
),
),
You can use Theme
to change the unselected widget color like given below
Theme(
data: ThemeData(unselectedWidgetColor: Colors.blue),
child: Checkbox(
...
)
)
You can also simply set the side
property of your Checkbox:
Checkbox(
value: true,
onChanged: (_) {},
// Background color of your checkbox if selected
activeColor: Colors.deepOrange,
// Color of your check mark
checkColor: Colors.black,
shape: hasCircleShape
// diplay checkbox with circle shape
? CircleBorder()
// or make the border slightly rounded
: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
// ======> CHANGE THE BORDER COLOR HERE <======
color: Colors.grey,
// Give your checkbox border a custom width
width: 1.5,
),
),
This code will help for border color change in onChanged Function.
Checkbox(
fillColor: MaterialStateProperty.all(Colors.transparent),
side: MaterialStateBorderSide.resolveWith((states) {
if(states.contains(MaterialState.pressed)){
return BorderSide(color: loginfontcolor);
}
else{
return BorderSide(color: loginfontcolor);
}
}),
checkColor: loginfontcolor,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
value: snapshot.tapval, onChanged: (val){
snapshot.changval= val!;
},
)
Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3),
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
value: true,
onChanged: (newValue) {},
/// Set your color here
fillColor: MaterialStateProperty.all(Colors.grey),
)
Simply like that:
Checkbox(
side: const BorderSide(
// set border color here
color: Colors.red,
),
value: isChecked,
onChanged: (bool? value) {},
),
set color in BorderSide ⬇️
Checkbox(
value: value,
onChanged: (){},
// YOUR COLOR HERE
side: BorderSide(color: Colors.green)),
Checkbox(
fillColor: MaterialStateProperty.all(consts.darkWhiteColor),
side: MaterialStateBorderSide.resolveWith((states) {
if(states.contains(MaterialState.selected)){
return const BorderSide(color: consts.navyColor);
} else {
return const BorderSide(color: consts.greyColor);
}
}),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(3.0))),
value: checkValue.value,
onChanged: widget.isDisabled
? null
: (value) {
checkValue.value = value ?? false;
widget.onChanged!(value ?? false);
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
checkColor: consts.navyColor,
activeColor: consts.darkWhiteColor,
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.