인프런 커뮤니티 질문&답변

GoRouter 초반부를 듣고 있는데, 제목과 같이 앱바타이틀이 정상적으로 표시되지 않는 문제를 겪고 있습니다.

Screen Three 로 이동했을때 앱바의 타이틀은
/one/two/three 로 표기가 되나,
뒤로가기를 눌렀을때 홈으로 이동할때까지 그 상태 그대로
/one/two/three 가 유지되다가 홈에서 / 로 표시가 됩니다.

OneScreen, TwoScreen, ThreeScreen 별로 각각 텍스트로 one, two, three 라고 입력해서 확인해본결과,
뒤로가기 할때마다 three 에서 출발해서 two, one 으로 화면에 잘 뜨는 것으로 보아 페이지 이동은 정상적으로 이루어지는 것 같습니다.

아래는 default_layout.dart 입니다.

class DefaultLayout extends StatelessWidget {
  final Widget body;

  const DefaultLayout({
    Key? key,
    required this.body,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final router = GoRouter.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(
          router.location,
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 16.0,
        ),
        child: body,
      ),
    );
  }
}

main.dart

void main() {
  runApp(_App());
}

class _App extends StatelessWidget {
  _App({Key? key}) : super(key: key);

  final GoRouter _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomeScreen(),
        routes: [
          GoRoute(
            path: 'one',
            builder: (context, state) => const OneScreen(),
            routes: [
              // http://.../one/two
              GoRoute(
                path: 'two',
                builder: (context, state) => const TwoScreen(),
                routes: [
                  // http://.../one/two/three
                  GoRoute(
                    path: 'three',
                    builder: (context, state) => const ThreeScreen(),
                  ),
                ],
              )
            ],
          ),
        ],
      ),
      // http://..../one
      // http://..../two
      // GoRoute(
      //   path: '/one',
      //   builder: (context, state) => const OneScreen(),
      // ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      theme: ThemeData(useMaterial3: true),
      // uri string 을 상태 및 go router 에서 사용할 수 있는 형태로 변환해주는 함수(자동)
      routeInformationParser: _router.routeInformationParser,
      // 위에서 변경된 값으로 실제 어떤 route 를 보여줄지 정하는 함수(자동)
      routerDelegate: _router.routerDelegate,
      // route 정보를 전달하는 함수(자동)
      routeInformationProvider: _router.routeInformationProvider,
    );
  }
}

home_screen.dart

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              context.go('/one');
            },
            child: const Text('go to OneScreen'),
          ),
          ElevatedButton(
            onPressed: () {
              context.go('/one/two/three');
            },
            child: const Text('go to ThreeScreen'),
          ),
        ],
      ),
    );
  }
}

3_screen.dart

class ThreeScreen extends StatelessWidget {
  const ThreeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      body: Column(
        children: const [Text('three')],
      ),
    );
  }
}

정도로 참고 코드를 올렸습니다.

goRouter 버전은 4.2.2 로 강의의 버전과 맞춰서 진행중입니다.