flutter radio 버튼 사용하기

 

 

라디오 버튼 사용법을 익혀보았다. 

 

 

먼저 클래스 밖에서 열거형 enum을 선언

enum Colorchange {red,green}
enum Colorchange2 {red2,green2}

 

그리고 컨테이너를 만들고 Row로 Radio와 텍스트를 자연스럽게 붙여준다. 

Radiotile 위젯도 있는데 이것은 가로로 한 줄을 다 차지해버려서 쓰기 더 번거로웠다. 

Container(width: 80,
                      height: 40,
                      child: Row(children: [Radio<Colorchange>(value: Colorchange.red, groupValue: _Colorchange, onChanged: (Colorchange? value) {
                        setState(() {
                          _Colorchange = value;
                        });
                      },),

                        Text('빨강'),],),),

                      Container(width: 80,
                        height: 40,
                        child: Row(children: [Radio<Colorchange>(value: Colorchange.green, groupValue: _Colorchange, onChanged: (Colorchange? value) {
                          setState(() {
                            _Colorchange = value;
                          });
                        },),

 

 

라디오 버튼의 선택된 값이 컨테이너 색의 색깔을 변경해주게 만들었다. 

삼항연산자를 사용했다. 뿌듯했다.

 

Center(
              child: Container(height: 150,
              width: double.infinity,
              color: _Colorchange==Colorchange.red ? Colors.redAccent : Colors.green,
              child: Text('Page A',style: TextStyle(
                fontWeight: FontWeight.bold,fontSize: 30,
              ),),),

처음 만져보는 위젯이라 엄청 헤맸다. 

스터디 멤버님의 아이디어로 시작되었다. 

심플하지만 뭐랄까 뫼비우스 띠 같은 느낌이다. 

 

처음에는 네비게이션을 네임드 라우트를 주지 않고 진행했더니 에러가 발생되었다. 

 

스택 순서가 맞지 않아서 그런 것 같았다. 

그래서 네임드 라우트를 만들고 진행했더니 잘 되었다. 

원가계산기를 만들면서 막힌 부분이었는데 이 스터디를 통해 해결 한 것 같다..!!!!