[j Flutter] Switch 스위치 / Check Box 체크박스 구현하기

checkbox와 switch를 구현해보자. 

 

1. CheckBox

 Padding(
                padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                child: Text('체크박스',style: TextStyle(fontSize: 30),)),

            Container(
              height:1.0,
              width:500.0,
              color:Colors.white,),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('빨간색 '),
                Transform.scale(
                  scale: 1.5,
                  child: Checkbox(
                    activeColor: Colors.white,
                    checkColor: Colors.red,
                    value: _checkBoxValue1,
                    onChanged: (value) {
                      setState(() {
                        _checkBoxValue1 = value;
                      });
                    },
                  ),
                ),
              ],
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('파란색 '),
                Transform.scale(
                  scale: 1.5,
                  child: Checkbox(
                    activeColor: Colors.white,
                    checkColor: Colors.blue,
                    value: _checkBoxValue2,
                    onChanged: (value) {
                      setState(() {
                        _checkBoxValue2 = value;
                      });
                    },
                  ),
                ),
              ],
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('초록색 '),
                Transform.scale(
                  scale: 1.5,
                  child: Checkbox(
                    activeColor: Colors.white,
                    checkColor: Colors.green,
                    value: _checkBoxValue3,
                    onChanged: (value) {
                      setState(() {
                        _checkBoxValue3 = value;
                      });
                    },
                  ),
                ),
              ],
            ),

 

 

2. Switch

 Padding(
                padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                child: Text('스위치',style: TextStyle(fontSize: 30),)),

            Container(
              height:1.0,
              width:500.0,
              color:Colors.white,),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('빨간색 '),
                Switch(
                  value: isSwitched1,
                  onChanged: (value) {
                    setState(() {
                      isSwitched1 = value;
                    });
                  },
                  activeColor: Colors.red,
                ),
              ],
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('파란색 '),
                Switch(
                  value: isSwitched2,
                  onChanged: (value) {
                    setState(() {
                      isSwitched2 = value;
                    });
                  },
                  activeColor: Colors.blue,
                ),
              ],
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('초록색 '),
                Switch(
                  value: isSwitched3,
                  onChanged: (value) {
                    setState(() {
                      isSwitched3 = value;
                    });
                  },
                  activeColor: Colors.green,
                )
              ],
            )

 

CheckBox / Switch 실행화면