[Widget] CheckBox

CheckBox Widget

---

1. Property 정리

 

Property

 

shape : CheckBox의 Shape을 지정할 수 있다.

shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(3),
),

 

side: CheckBox의 border 지정할 수 있다.

side: const BorderSide(color: Colors.black,),

 

Example

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,
  ),
),

 

 

만약 CheckBox Default 색 = Check 안됐을 때 바꾸고 싶다면

 

unselectedWidgetColor를 바꿔주면 된다.

MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    unselectedWidgetColor: Colors.red, // <-- your color
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

 

CheckBox의 State를 상태에 따라 바꾸고 싶다면 (예시)

 

만약 모든 Interaction에 대해서 설정하고 싶다면 

MaterialProperty.all(COLORS)

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      // If the button is pressed, return green, otherwise blue
      if (states.contains(MaterialState.pressed)) {
        return Colors.green;
      }
      return Colors.blue;
    }),
    textStyle: MaterialStateProperty.resolveWith((states) {
      // If the button is pressed, return size 40, otherwise 20
      if (states.contains(MaterialState.pressed)) {
        return TextStyle(fontSize: 40);
      }
      return TextStyle(fontSize: 20);
    }),
  ),
  child: Text("Changing Button"),
  onPressed: () {},
)

 

또 다른 방법은 Propert method로 빼서 따로 설정해준다.

 

Widget build(BuildContext context) {
	
  // Method로 빼서 !!
  Color getColor(Set<MaterialState> states) { 
    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
    };
    if (states.any(interactiveStates.contains)) {
      return Colors.blue;
    }
    return Colors.red;
  }
  return TextButton(
    style: ButtonStyle(
      foregroundColor: MaterialStateProperty.resolveWith(getColor),
    ),
    onPressed: () {},
    child: Text('TextButton'),
  );
}

 

 

[참고 Link]

- https://stackoverflow.com/questions/59651366/how-to-change-checkbox-border-color-in-flutter-by-default-it-is-showing-black%5C

How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey