개발자의 공부방/모바일

Flutter] ToggleButtons으로 선택 버튼 구현하기

  • -
728x90
반응형

class _MarketOrderBookState extends State<MarketOrderBook> {

	final _isSelected = [true, false, false];
    
 }
 
child: ToggleButtons(
  constraints: BoxConstraints.expand(
      width: (constraints.maxWidth - 4) / 3),
  color: Color(0xff8d8d8d),
  fillColor: Color(0xff4063ae),
  selectedColor: Color(0xffffffff),
  children: [
    Wrap(
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 2.0),
          child: Icon(
            Icons.monetization_on,
            size: 20,
          ),
        ),
        Text('A'),
      ],
    ),
    Wrap(
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 2.0),
          child: Icon(
            Icons.monetization_on,
            size: 20,
          ),
        ),
        Text('B'),
      ],
    ),
    Wrap(
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 2.0),
          child: Icon(
            Icons.monetization_on,
            size: 20,
          ),
        ),
        Text('C'),
      ],
    )
  ],
  isSelected: _isSelected,
  onPressed: (int index) {
    setState(
      () {
        for (int buttonIndex = 0;
            buttonIndex < _isSelected.length;
            buttonIndex++) {
          if (buttonIndex == index) {
            _isSelected[buttonIndex] = true;
          } else {
            _isSelected[buttonIndex] = false;
          }
        }
        // _buttonsState[index] = !_buttonsState[index];
      },
    );
  },
),

목표: press(터치했을 때) 이벤트가 있을 때 하나만 활성화되는 버튼을 만든다.

 

상태 클래스에 final로 버튼의 기본값이 되는 변수를 선언해 놓는다.

isSelected는 true, fasle의 List boolean 값을 갖고 있다.

 

 

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.