[flutter] 22강 | Navigator 이해하기

✅ 이번시간에는 네비게이터를 이용해 화면 전환하기 + 컨텍스트에 대해서 알아볼 예정이야

 

✅ Navigator 및 포스팅의 순서

1. Route의 개념

 - 스마트폰에서 보여지는 하나의 페이지 화면 ! 

2. Navigator의 정의와 push, pop 함수, stack 자료구조

 - stack ( FILO ) 

 - push 데이터를 넣기

 - pop 데이터를 빼기

 - Route(페이지) 는 Navigator라는 위젯이 담당하고 그 구조는 스택 구조이다.

3. MaterialPageRoute위젯과 context

 - 화면전환할 때, 바로 class 입력해서 이동하는 것이 아니라 화면을 지정해주면서 이동한다.

4. 페이지 이동 기능 구현 완성

✅ 코드 리뷰

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme:
          ThemeData(primarySwatch: Colors.blue // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
              ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First page'),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text('Go to the Second page'),
          onPressed:  () {
            Navigator.push(context,MaterialPageRoute( // 페이지 이동은 기본적으로 안드로이드 페이지 이동 사용
                builder: (BuildContext context) {
                  return SecondPage();
                }

            ));
        },
        ),

      ),
    );
  }
}

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

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second page'),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text('Go to the First page'),
          onPressed: () {
            Navigator.pop(ctx);// 자신이 사라지면 자신 아래의 네비게이터 스택으로 이동

          },
        ),

      ),
    );
  }
}

🔸 onPressed 다음과 같이 바꿀 수 있다.

 

완성한 화면