(코딩쉐프) 22강 Navigator 1

 

 

* 우선 22~23강의 route개념은 중요하므로 여러번 봐야할 듯 , 그리고 24강 끝에 해답이있는데 이것이 핵심? ㅜㅜ

1. Route는 페이지라 생각 하면 됨

2. Navigator는 push, pop을 사용하며 stack형태를 이룸

3. push할 때 MaterialPageRoute(builder)를 사용함 *

  - BuildContext정보가 중요함

** 매우 중요한 것 MaterialPageRoute에서 context 인자로 넘겨줄 때 MaterialApp의 상위 위젯의 context를 넘겨주면 안된다. 그렇기에 아래 push처럼 MaterialApp의 하위 child의 context를 넘겨줘야함.

(아래 코드들에서 첫 route는 First이고 두번째 route는 Second임)

push 핵심 코드

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('First'),
      centerTitle: true,
    ),
    body: Center(
      child: ElevatedButton(
        child: Text('Go to the Second Page'),
      onPressed: () {
        Navigator.push(context,
          MaterialPageRoute(builder: (BuildContext context) {
          return Second();
        }));
      },
    )),
  );
}

만약 builder의 매개변수를 사용하지 않을 경우 아래처럼 _ 를 사용하는 것을 추천함

onPressed: () {
  Navigator.push(context,
    MaterialPageRoute(builder: (_) => Second()
  ));
},

 

pop 핵심 코드

Widget build(BuildContext context2) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Second'),
      centerTitle: true,
    ),
    body: Center(
        child: ElevatedButton(
      child: Text('Go to the First Page'),
      onPressed: () {
        Navigator.pop(context2);
      },
    )),
  );
}

 

 

전체 코드

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Toast Message',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: First(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
        centerTitle: true,
      ),
      body: Center(
          child: ElevatedButton(
        child: Text('Go to the Second Page'),
        onPressed: () {
          Navigator.push(context,
            MaterialPageRoute(builder: (BuildContext context) {
            return Second();
          }));
        },
      )),
    );
  }
}

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

  @override
  Widget build(BuildContext context2) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second'),
        centerTitle: true,
      ),
      body: Center(
          child: ElevatedButton(
        child: Text('Go to the First Page'),
        onPressed: () {
          Navigator.pop(context2);
        },
      )),
    );
  }
}