본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 AppBar의 전달 아이콘 주위의 여분의 여백을 제거하는 방법, How to remove extra padding around AppBar leading icon in Flutter

by 베타코드 2023. 10. 1.
반응형

질문


내 Flutter 앱에서 이 AppBar이 있습니다.

Widget setAppBar(){
  return new AppBar(
    title: addAppBarTextWidget('탐색'),
    elevation: 0.0,
    leading: addLeadingIcon(),
    actions: <Widget>[
      addAppBarActionWidget(Constant.iconNotification, 22.0, 16.0, 8.0),
      addAppBarActionWidget(Constant.iconProfile, 30.0, 30.0, 15.0)
    ],
  );
}

Widget addLeadingIcon(){
  return new Container(
    height: 25.0,
    width: 25.0,
    padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    child: new Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        new Image.asset(
          Constant.iconNotification,
          width: 25.0,
          height: 25.0,
        ),
        new FlatButton(
            onPressed: (){
              onLeadingShowCategoryClick();
            }
        )
      ],
    ),
  );
}

그림과 같이 보입니다:

enter image description here

AppBar에서 볼 수 있듯이, 선행 아이콘 주위에 약간의 여분의 패딩이 있습니다. 이 여분의 패딩을 어떻게 제거할 수 있을까요.


답변


Just add a property called titleSpacing,

Sample

appBar: AppBar(
        leading: Icon(Icons.android),
        titleSpacing: 0,
        title: Text(widget.title),
      ),

titleSpacing라는 속성을 추가하면 됩니다.

샘플

appBar: AppBar(
        leading: Icon(Icons.android),
        titleSpacing: 0,
        title: Text(widget.title),
      ),
반응형

댓글