[Flutter] 위젯의 Definition File(정의 파일)을 살펴보고 스스로 문제 해결하기 / 부제 - 내비게이션바 스타일 지정하는 방법

위젯의 Definition File(정의 파일)을 살펴보고 스스로 문제 해결하기 - (내비게이션바 라벨 폰트 크기 키우기)

 

플러터 프로젝트를 진행하는 도중 내비게이션바 위젯을 편집하는데 문제가 생겼습니다. 스스로 직면한 문제를 해결하고자 위젯 정의 파일을 파고들었습니다. 플러터는 위젯의 정의 파일로 손쉽게 이동하여 해당 위젯이 어떻게 만들어졌는지 파악하기 쉽다는 장점이 있습니다.

 

---

발단

폰트의 크기가 너무 작다

 

위와 같은 홈 스크린을 구상하였는데 ThemeData에 새롭게 폰트를 적용하니 내비게이션바의 라벨 사이즈가 매우 작아졌습니다. 글씨를 알아보기 힘들어 크기를 키우고자 했습니다.

 

 

문제는 NavigationBar의 어디에도 라벨의 스타일을 바꾸는 프로퍼티가 존재하지 않습니다.

---

해결 과정

 

 

처음에는 프로젝트 전체의 텍스트 크기를 조정하면 될 것이라고 생각했습니다. 그래서 위와 같이 MediaQuery를 통해 텍스트 크기를 고정하는 방법을 알아냈습니다. 그 결과 다른 화면의 텍스트 크기는 커졌지만 내비게이션바 내부의 라벨 크기는 그대로였습니다. 왜냐하면 내비게이션바의 라벨의 데이터 타입은 문자열(String)이기 때문입니다.

 

따라서 조금 다른 접근 방식이 필요했습니다.

 

 

플러터에서 궁금한 위젯이 있다면 우클릭을 통해 정의 파일을 확인할 수 있습니다. (Go to Definition)

 

 

내비게이션바(Navigation Bar)의 정의 파일인 navigation_bar.dart로 넘어왔습니다. () 조금 더 아래로 내려가 Style에 관련된 부분을 찾아보겠습니다.

 

 

그리고 labelTextStyle이라는 부분을 찾아냈습니다. 여기서 한 번 더 labelTextStyle을 우클릭 하여 새로운 정의 파일로 이동합니다.

 

class NavigationBarThemeData with Diagnosticable {
  /// Creates a theme that can be used for [ThemeData.navigationBarTheme] and
  /// [NavigationBarTheme].
  const NavigationBarThemeData({
    this.height,
    this.backgroundColor,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.indicatorColor,
    this.indicatorShape,
    this.labelTextStyle,
    this.iconTheme,
    this.labelBehavior,
  });
  
  ...

 

navigation_bar_theme.dart 파일로 넘어오자 원하는 부분을 발견할 수 있었습니다. NavigationBarThemeData를 통해서 내비게이션바의 스타일을 수정할 수 있다는 사실을 알아냈습니다.

 

주석을 잘 살펴보면 ThemeData.navigationBarTheme을 사용해야한다고 명시되어 있습니다.

 

 

따라서 곧바로 main.dart 파일의 ThemeData부분을 수정 해주었습니다. TextStyle을 MaterialStatePropertyAll으로 감싸주어야 에러가 발생하지 않습니다. 해당 위젯의 자세한 내용은 따로 다시 한 번 서술하겠습니다.

 

그 결과 ...

 

폰트의 크기가 커졌습니다 !

 

내비게이션 바 내부의 라벨의 폰트 크기가 커졌습니다.

---

결론

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pocket Teacher',
      theme: ThemeData(
        navigationBarTheme: const NavigationBarThemeData(
          backgroundColor: children_dark,
          labelTextStyle: MaterialStatePropertyAll(TextStyle(fontSize: 20.0)),
        ),
        fontFamily: 'Dongle',
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: MainScreen.id,
      routes: {
        // WelcomeScreen.id
        // LoginScreen.id
        // RegistrationScreen.id
        MainScreen.id: (context) => const MainScreen(),
        // StampScreen.id
      },
    );
  }

 

위와 같이ThemeData 내부에서  navigationBarTheme을 통해 내비게이션 바의 스타일을 지정할 수 있습니다.