Navigator를 이용해 화면 전환

[참고자료] https://flutter-ko.dev/docs/cookbook/navigation/navigation-basics

쌓이지 않은 페이지가 없는, 초기 라우트 상태에서 pop을 하면 어떻게 될까요?
한번 시도해보세요!!😌 껌껌하죠..?..😌

남아있는 페이지가 없으니 다음과 같이 나왔는데요,
이를 방지하고자 maybePop이라는 함수가 있습니다.

말그대로 pop할 페이지가 있을 때만 동작하는 함수인데요
한번 초기 라우트 상태에서 버튼을 눌러보세요! 아주 유용하죠?😆

참고로 두번째 이상 쌓인(push) 페이지라면 leading(왼쪽) 위치에 있는
기본으로 그려지는 뒤로가기 버튼 또한 Navigator.mayPop으로 동작합니다.

main.dart

import 'dart:ffi';

import 'package:counting_sample/pages/page1.dart';
import 'package:counting_sample/pages/page2.dart';
import 'package:counting_sample/pages/page3.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // darkTheme: ThemeData.dark(), // 다크모드
        theme: ThemeData(
          primarySwatch: Colors.orange, // 전체 메인컬러를 Default값으로 설정
        ),
        home: const Page1());
  }
}

Page1.dart

import 'package:counting_sample/pages/page2.dart';
import 'package:flutter/material.dart';

class Page1 extends StatefulWidget {
  const Page1({
    Key? key,
  }) : super(key: key);

  @override
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  int _index = 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('AppBar')),
        // leading위치에 x표시로 생성 (나가기 버튼)
        leading: IconButton(
          icon: const Icon(Icons.close),
          onPressed: () {
            // 초기 라우트 상태에서 pop을 하면 화면이 깜깜해짐, 이를 방지하기위한 maybePop함수가 있음 (pop할 페이지가 있을 때만 동작하는 함수)
            Navigator.maybePop(context);
          },
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'ㅎㅇㅎㅇ?',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  // 페이지 레이어를 위에 쌓음, leading위치에 뒤로가기 버튼 자동생성
                  context,
                  MaterialPageRoute(
                    builder: (context) => const Page2(),
                  ),
                );
              },
              child: Text('Page2로 이동'),
            )
          ],
        ),
      ),
      // 하단 NavBar
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index, // 현재 index값(기본값 설정)
        onTap: (value) => setState(() {
          // 탭 했을때 index값이 탭한 index값으로 변경
          _index = value;
        }),
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.star),
            label: '별',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.alarm),
            label: '알람',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '설정',
          ),
        ],
      ),
    );
  }
}

Page2.dart

import 'package:counting_sample/pages/page3.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('페이지2'),

        // leading위치에 x표시로 생성 (나가기 버튼)
        // leading: IconButton(
        //
        //   icon: const Icon(Icons.close),
        //   onPressed: () {
        //     Navigator.pop(context);
        //   },
        // ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('page2 ㅎㅇ', style: Theme.of(context).textTheme.subtitle2),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const Page3(),
                  ),
                );
              },
              child: const Text('Page3 이동'),
            ),
          ],
        ),
      ),
    );
  }
}

Page3.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('Page3')),
      ),
      body: const Center(
        child: Text('Page3 ㅎㅇㅎㅇ'),
      ),
    );
  }
}