본문 바로가기

프로그래밍/Flutter

외부에서 AppBar Title 변경하기

외부 위젯에서 메인 AppBar 타이틀을 변경하는 방법은 메인으로 파라미터를 넘기는 방법도 있고 여러가지가 있는데,

 

의존성을 줄인 최대한 간단한 방법을 소개한다.

 

먼저 어디서든 접근가능한 전역변수를 선언.

import 'package:flutter/foundation.dart';

class AppTitle {
  // 앱 전역에서 공유하는 AppBar 타이틀 Notifier
  static final ValueNotifier<String> notifier =
  ValueNotifier<String>('타이틀 테스트');
}

 

ValueNotifier는 제너릭타입<T>를 받아서 특정 값의 변화를 구독(Listen)할 수 있도록 해주는 클래스이다.

즉, ValueNotifier<String> → String 값을 감시하는 옵저버블 객체를 의미한다.

해당 값이 바뀌면, 이 notifier를 구독하고 있는 모든 위젯들이 자동으로 업데이트된다.

 

그리고 메인클래스를 다음과 같이 수정해준다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      // ✅ 전역 Notifier를 구독
      title: ValueListenableBuilder<String>(
        valueListenable: AppTitle.notifier,
        builder: (_, title, __) => Text(title),
      ),

 

ValueListenableBuilder<String> : 값 변화를 감지하는 객체를 구독하는 위젯

valueListenable에 AppTitle.notifier를 전달 → AppTitle.notifier.value가 바뀔 때마다 builder 콜백이 다시 실행되는 구조

builder의 매개변수:

  • 첫 번째 _: BuildContext인데, 쓰지 않으니까 _로 무시 처리.
  • 두 번째 title: AppTitle.notifier.value 값 (즉, 현재 문자열).
  • 세 번째 __: 자주 쓰는 child인데, 여기서는 안 쓰므로 __ 처리.

크게 위 2개가 기본 셋팅이고, 이제 외부에서 다음과 같이 수정하면 된다.

if(index == 0)
  AppTitle.notifier.value = '타이틀1';
else
  AppTitle.notifier.value = '타이틀2';

 

이런식으로 전역변수 AppTitle.notifier 를 필요할때마다 수정하면 자동으로 메인 AppBar Title이 갱신된다.

 

끝.