본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터 - 위젯(IconButton, CheckBox, FlatButton)에서 기본 패딩(문서에 따르면 48px)을 제거하는 방법, Flutter - how to remove default padding (48 px as per doc) from widgets (IconButton, CheckBox, FlatButton)

by 베타코드 2023. 9. 21.
반응형

질문


위젯 (IconButton, CheckBox, FlatButton)의 기본 패딩에 문제가 있습니다. 이 문제에 대해 많이 검색해 보았지만 성공하지 못했습니다.

이미지 설명 입력

위 이미지에서 외부 파란색 사각형은 이 위젯들의 실제 크기이며, 해당 공간을 제거해야 합니다.

Checkbox(
          onChanged: (value) {
            setState(() {
              _rememberMeFlag = !_rememberMeFlag;
            });
          },
          value: _rememberMeFlag,
          activeColor: const Color(0xff00bbff),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )

아래는 위젯 아이콘을 숨기거나 표시하는 위젯 코드입니다:

new Container(
          child: TextFormField(
            decoration: InputDecoration(
              labelText: "비밀번호",
              suffixIcon: Padding(
                padding: EdgeInsetsDirectional.zero,
                child: GestureDetector(
                  child: Icon(
                    hidePassword ? Icons.visibility : Icons.visibility_off,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
              ),
              contentPadding: const EdgeInsets.only(
                  left: 0.0, top: 6.0, bottom: 6.0, right: 0.0),
            ),
            obscureText: !hidePassword,
            maxLength: 20,
          ),
        )

Container 크기를 설정해 보았지만 실패했습니다. 또한 위젯의 패딩 속성도 시도해 보았지만 성공하지 못했습니다.

이 위젯들에서 이 추가 공간을 제거할 수 있는 방법이 있을까요?


답변


wrap your CheckBox inside SizedBox will resize the padding of the check box

  SizedBox(
    height: 24.0,
    width: 24.0,
    child: Checkbox(...),
 )

체크 박스의 패딩을 조절하려면 CheckBoxSizedBox로 감싸세요

  SizedBox(
    height: 24.0,
    width: 24.0,
    child: Checkbox(...),
 )
반응형

댓글