[Flutter::Widget] 토글 스위치...? 토글 버튼? (ToggleButtons class)

ToggleButtons

이 깔끔하고 아름다운 토글형태의 선택버튼이 있는 이미지를 생각했지만 아는 건 쥐뿔만큼 없는 난 토글 스위치라는 단어 밖에 생각나지 않았다. 요즘 GPT도 멍청해져서 그냥 혼자 찾아보고 있다가 카톡 오픈채팅으로 질문을 물어보았다. 구현하라고 하면 구현할 수는 있겠지만 내장되어 있는 위젯을 사용하는 게 더 깔끔하기 때문에 찾아보았다.

카카오톡 오픈채팅 질문(익명처리 했음)

좋은 답변들이 왔지만 결국 자문자답하였다 ㅋㅋ 도움을 주신 분들 감사합니다.

글을 쓴 이유?

그림과 같은 토글버튼의 존재를 몰랐기 때문에 기억하려고 적은 이유가 커서 이미 목적은 달성했다. 제목을 저렇게 지은 이유도 이 때문이다. ToggleButtons에 대한 설명은 문서를 보면되니까. 기본을 알려주는 교과서적인 정리는 시간이 될 때..? 근데 하나 적고 싶은 게 있다!

ToggleButtons 크기 조절 방법

ToggleButtons 크기 조절 방법

간단하다. constraints 프로퍼티로 조정해주면 된다.

constraints: BoxConstraints(
  minWidth: 75,
  minHeight: 30,
  maxHeight: 30,
  maxWidth: 75,
),

이 부분도 내가 10에서 15분 정도 헤맸던 내용이다...

CODE

List<bool> isSelected = [true, false];
(...CODE...)
ToggleButtons(
  borderRadius: BorderRadius.circular(50),
  isSelected: isSelected,
  fillColor: Colors.lightGreen,
  selectedColor: Colors.white,
  color: Colors.lightGreen,
  selectedBorderColor: Colors.lightGreen,
  borderColor: Colors.lightGreen,
  constraints: BoxConstraints(
    minWidth: 75,
    minHeight: 30,
    maxHeight: 30,
    maxWidth: 75,
  ),
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Center(
        child: Text(
          '캘린더',
          style: TextStyle(fontSize: 14),
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Center(
        child: Text(
          '그래프',
          style: TextStyle(fontSize: 14),
        ),
      ),
    ),
  ],
  onPressed: (int index) {
    setState(() {
      for (int i = 0; i < isSelected.length; i++) {
        isSelected[i] = i == index;
      }
    });
  },
),