Flutter toggleButtons 만들기

 

 

이렇게 달러를 클릭하면 달러의 주식가격이 원을 클릭하면 원화 가격이 나오게 토글버튼을 구현 해보려고 한다. 먼저 토글 버튼과 금액을 다른 컨테이너로 움직이기 때문에 (눈속임... 이라고 할 수 있음) 토글 버튼을 먼저 구현 하는 것을 정리해 보려고 한다. 

 

 

코드는 아래와 같고 토글 버튼은 켰다 껐다 의 개념으로 true, false 를 주어 해당 버튼이 어떤 상태인지 인지하게 해준다. 

isSelected = [ture, false]; 

ToggleButtons(
    fillColor: Colors.grey,
    selectedColor: Colors.white,
    selectedBorderColor: Colors.white,
     onPressed: (int index) {
       for (int buttonIndex = 0;
        buttonIndex < isSelected.length;
        buttonIndex++) {
          isSelected[buttonIndex] = buttonIndex == index;
            }
       },
         isSelected: isSelected,
         children: const [
         Text('\$',
         style: TextStyle(color: Colors.white, fontSize: 10)),
         Text('원',
          style: TextStyle(color: Colors.white, fontSize: 10)),
           ],
        ),

 

따라서 

  onPressed: (int index) {
       for (int buttonIndex = 0;
        buttonIndex < isSelected.length;
        buttonIndex++) {
          isSelected[buttonIndex] = buttonIndex == index;
            }
       },

 

이 부분의 목적은 특정 버튼이 눌렸을 때 그 버튼만 선택되도록 하고, 나머지 버튼들은 선택이 해제되도록 하는 토글 동작을 구현하는 것이다.. 선택된 버튼의 인덱스만 true로 설정하고, 나머지는 false로 설정하여 단일 선택을 유지하게 된다. 

 

 

토글버튼의 주요 기능을 살펴보면 아래와 같다. 

children: 토글 버튼으로 사용할 위젯들의 목록입니다. 예를 들면, 아이콘, 텍스트 등이 될 수 있다.
isSelected: 각 버튼이 선택되었는지 여부를 나타내는 bool 값의 목록으로 이 값들은 각 버튼의 초기 선택 상태를 정의한다. 
onPressed: 버튼이 눌렸을 때 호출될 함수를 지정한다. 이 함수는 각 버튼의 인덱스와 함께 호출된다.
borderRadius: 버튼의 모서리를 둥글게 만드는 데 사용되는 BorderRadius 객체이다.
selectedColor: 선택된 버튼의 배경색을 나타내는 Color 객체이다.
color: 선택되지 않은 버튼의 배경색을 나타내는 Color 객체이다.
selectedBorderColor: 선택된 버튼의 테두리 색을 나타내는 Color 객체이다.
borderColor: 선택되지 않은 버튼의 테두리 색을 나타내는 Color 객체이다.
disabledColor: 비활성화된 버튼의 배경색을 나타내는 Color 객체이다.
disabledBorderColor: 비활성화된 버튼의 테두리 색을 나타내는 Color 객체이다.
disabledTextColor: 비활성화된 버튼의 텍스트 색을 나타내는 Color 객체이다.
textTheme: 버튼에 대한 텍스트 스타일을 나타내는 ButtonTextTheme 객체이다.

constraints: 버튼의 크기와 여백을 지정하는 BoxConstraints 객체이다.
focusColor: 버튼이 포커스를 받았을 때의 배경색을 나타내는 Color 객체이다.
focusBorderColor: 버튼이 포커스를 받았을 때의 테두리 색을 나타내는 Color 객체이다.
hoverColor: 버튼에 호버됐을 때의 배경색을 나타내는 Color 객체이다.

hoverBorderColor: 버튼에 호버됐을 때의 테두리 색을 나타내는 Color 객체이다.