Flutter - 내비게이션 이해하기(2)

내비게이션으로 스택에 자료를 넣고, 교체하고, 빼는 기능에 대해 좀 더 알아보았다.

---

첫 번째 페이지가 되는 subDetail.dart 파일을 만들어 다음의 코드를 작성하였다.

import 'package:flutter/material.dart';

class SubDetail extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SubDetail();
  }
}

class _SubDetail extends State<SubDetail>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sub Detail Example'),),
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushReplacementNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),
        ),
      ),
    );
  }
}

라우트 기능을 이용해 버튼을 누르면 두 번째 페이지로 이동하도록 만들었다.
pushReplacementNamed() 함수는 스택 메모리에 있는 자료를 교체하는 함수다.

---

두 번째 페이지인 secondDetail.dart 파일을 만들고 다음의 코드를 작성하였다.

import 'package:flutter/material.dart';

class SecondDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page'),),
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text('첫 번째 페이지로 돌아가기'),
          ),
        ),
      ),
    );
  }

}

버튼을 누르면 pop() 함수를 통해 첫 번째 페이지로 돌아온다.

---

main.dart 파일을 다음처럼 수정하였다.

import 'package:flutter/material.dart';
import 'subDetail.dart';
import 'secondDetail.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  static const String _title = 'Widget Example';
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => SubDetail(),
        '/second': (context) => SecondDetail(),
      },
    );
  }
}

initialRoute와 routes를 사용해 경로를 지정해주었다.

이 상태에서 앱을 실행하면
SubDetail 화면에서 버튼을 누르면 SecondDetail 화면으로 넘어가지만
SecondDetail 화면에서 버튼을 누르면 SubDetail화면으로 넘어가지 않고 까만 화면이 나온다.

_SubDetail 클래스에서 사용한 pushReplacementNamed() 함수가 스택에 자료를 추가하지 않고 기존 자료를 교체하기 때문이다.

이 때의 앱의 스택 구조를 그림으로 보면 다음과 같다.

---

pushReplacementNamed() 함수에 대해 좀 더 살펴보기 위해
thirdDetail.dart 파일을 만들고 다음의 코드를 작성하였다.

import 'package:flutter/material.dart';

class ThirdDetail extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('Third Page'),),
     body: Container(
       child: Center(
         child: ElevatedButton(
           onPressed: (){
             Navigator.of(context).pop();
           },
           child: Text('첫 번째 페이지로 돌아가기'),
         ),
       ),
     ),
   );
 }

}

_SubDetail의 pushReplacementNamed() 함수를 pushNamed() 함수로 바꾸었다.

          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),

SecondDetail 클래스의 버튼 이벤트도 다음처럼 수정했다.
pushReplacementNamed() 함수로 스택에서 현재 위치의 자료를 세 번째 페이지로 교체한다.

          child: ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushReplacementNamed('/third');
            },
            child: Text('세 번째 페이지로 이동하기'),
          ),

main.dart 함수의 routes에 /third 경로를 선언하였다.

      routes: {
        '/': (context) => SubDetail(),
        '/second': (context) => SecondDetail(),
        '/third': (context) => ThirdDetail(),
      },

이제 앱을 실행하면 정상적으로 화면이 Sub -> Second -> Third -> Sub로 이동한다.

앱의 스택 구조를 그림으로 보면 다음과 같다.

이후 pop()으로 ThirdDetail을 제거해도 남아있는 subDetail이 정상적으로 표시되게 된다.

---

이처럼 내비게이션을 이용해 스택에 위젯을 넣고, 교체하고, 빼는 함수를 활용해 페이지의 이동 경로를 목적에 맞게 구현할 수 있다.