【Flutter】AppBar의 뒤로 아이콘(leading)을 커스터마이즈 해 본다

이 기사에서 할 것.

뒤로 아이콘 삭제

뒤로 아이콘 대신 텍스트 버튼 설치

텍스트 버튼 레이아웃 해소

1. 뒤로 버튼 삭제

Flutter 앱은 화면 전환을 통해 AppBar로 돌아가는 아이콘이 자동으로 설치됩니다.



이 자동으로 설치된 뒤로 아이콘을 가장 쉽게 삭제하는 방법은
automaticallyImplyLeading을 false로 설정하는 것 같습니다.

automaticallyImplyLeading이란?

AppBar의 선두가 null의 경우, 왼쪽 화살표(뒤 아이콘)를 자동적으로 부여해. 라고 하는 것만으로 싶습니다.
즉 leading을 설정해 주면, automaticallyImplyLeading 의 파라미터는 무효가 된다는 것이라고 생각합니다.

소스는 이쪽

실제로 삭제해보기

automaticallyImplyLeading을 false로 설정합니다.

전환 대상 화면 .dart

AppBar(
  automaticallyImplyLeading: false,
),

동작 확인해 봅시다.



이제 뒤로 아이콘을 삭제할 수 있습니다.

2. 뒤로 아이콘 대신 텍스트 버튼 설치

automaticallyImplyLeading이란? 에서 확인했지만,
leading을 설정해주면 AppBar의 선두는 null가 없어져, 대체가 되는 위젯을 설치할 수 있습니다.

이번에는 "취소"라는 텍스트의 텍스트 버튼을 뒤로 아이콘 대신 설치해 보려고합니다.

첫째, 리딩 이해

Flutter 공식 문서 를 보면,

"A widget to display before the toolbar's title."

AppBar 타이틀 이전에 웨젯을 설정할 수 있어요. 적이 쓰여있는 것 같습니다.
즉, AppBar의 가장 왼쪽에 무언가를 설치해 주고 싶을 때는, leading을 사용한다는 인식으로 좋은 것일까라고 생각하고 있습니다.

실제로 텍스트 버튼을 설치해 봅니다.

전환 대상 화면 .dart

 AppBar(
   leading: TextButton(
      child: Text(
         'キャンセル',
         style: TextStyle(
           color: Colors.white,  //文字の色を白にする
           fontWeight: FontWeight.bold,  //文字を太字する
           fontSize: 12.0,  //文字のサイズを調整する
          ),
      ),
  onPressed: () => Navigator.of(context).pop(),
  ),

동작 확인해 봅시다.



안전하게 "취소"텍스트 버튼을 볼 수있었습니다.
천이의 동작도 문제없는 것 같습니다.
하지만 취소가 부자연스럽게 개행되어 버려 레이아웃이 무너지고 있습니다.
다음은 레이아웃을 조정할 것입니다.

3. 텍스트 버튼의 레이아웃 해소

이 레이아웃 붕괴는 leading의 width가 초기치보다 넘어 버렸기 때문에,
접혀 표시되어 버리는 것이 원인이라고 생각합니다.
leadingWidth 를 적절히 설정함으로써 레이아웃 붕괴를 해소할 수 있었습니다.

leading의 레이아웃 붕괴를 해소한다.

전환 대상 화면 .dart

 AppBar(
   leadingWidth: 85,  //leadingWidthを設定する
   leading: TextButton(
      child: Text(
         'キャンセル',
         style: TextStyle(
           color: Colors.white,  //文字の色を白にする
           fontWeight: FontWeight.bold,  //文字を太字する
           fontSize: 12.0,  //文字のサイズを調整する
          ),
      ),
  onPressed: () => Navigator.of(context).pop(),
  ),

동작 확인해 봅시다.



무사히, 레이아웃 무너짐이 해소되었습니다.