Jacob Ko

Jacob Ko

Everything is Awesome 👍

네비게이션

Updated:

새로운 화면으로 전환하거나 이전 화면으로 돌아가는 것을 네비게이션이라고 합니다.

1.Route 의 개념

  • The navigator manages a stack of Route objects and provides method for managing the stack, like Navigator.push and Navigator.pop

2.새로운 화면으로 이동

파일 분할 및 import 방법

  • 하나에 모든 클레스를 작성할 수 있지만, 코드 수정 및 코드 유지관리 효율성을 위해 main.dart 에 first_page.dart, second_page.dart 분리 작성해서 import 하여 다른 파일에 있는 클래스를 사용할 수 있습니다.

push로 새로운 화면 호출 / pop 으로 이전 화면으로 이동

  • Navigator.push() 메서드는 새로운 화면이 표시되어도 이전 화면은 메모리에 남게 됩니다. 이때 Navigator.pop() 메서드로 현재 화면을 종료하고 이전 화면으로 돌아 가게 합니다
// main.dart

import 'package:flutter/material.dart';
// FirstPage() 클래스 import
import 'first_page.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 Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}


// in first_page.dart

import 'package:flutter/material.dart';
// import SecondPage 클래스
import 'second_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: ElevatedButton(
        child: const Text('다음페이지로'),
        onPressed: () {
          Navigator.push(
            // SecondPage 로 화면 push 이동하기
            context,
            // MaterialPageRoute 클래스는 안드로이드와 iOS 의 각각 화면 전환을 지원함
            // builder 프로퍼티에는 buildContext 인스턴스를 인수로 받고 이동할 화면의 클래스 인스턴스를 반환하는 함수를 작성
            MaterialPageRoute(builder: (context) => const SecondPage()),
          );
        },
      ),
    );
  }
}

// second_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: ElevatedButton(
        child: const Text('이전 페이지로'),
        onPressed: () {
          Navigator.pop(context); // 현재 화면을 종료하고 이전화면으로 돌아가기
        },
      ),
    );
  }
}

Kapture 2021-10-12 at 14 18 20

3.pushNamed 매서드

  • builder 에서 매개값 parameter 가 없는 경우 (_) underscore 로 표시 하게 됩니다

  • multi page 이동을 위해서 반드시 설정해야 되는것이 routes 와 initialRoute 입니다

  • initialRoute 는 multiPage 이동을 할때 화면에 제일 출력되는 router 로써 home argument 를 지정할때 사용합니다.

  • routes 은 이동할 페이지의 이름을 생성합니다. map의 자료 구조 형태로 이뤄져 있습니다. (key : value 값 형태) => String: Widget builder 가 한 쌍으로 같이 설정 되어야 합니다.

  • Push_named 를 사용해서 페이지의 이름을 설정해서 정확하게 그 페이지로 이동 이 가능하게 만들 수 있습니다. multi page 화면 생성

// in main.dart

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar',
      theme: ThemeData(primaryColor: Colors.lightBlue),
      // 초기 화면의 경로를 표시해줌
      initialRoute: '/',
      // named routes 를 map 형식으로 아래와 같이 경로를 지정해 준다
      routes: {
        '/': (context) => ScreenA(),
        '/b': (context) => ScreenB(),
        '/c': (context) => ScreenC(),
      },
    );
  }
}


// in screen_a.dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenA'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/b');
              },
              child: Text('Go to ScreenB'),
            ),
            SizedBox(
              height: 50.0,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/c');
              },
              child: Text('Go to ScreenC'),
            ),
          ],
        ),
      ),
    );
  }
}


// in screen_b.dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenB'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'ScreenB',
              style: TextStyle(fontSize: 24.0),
            ),
            SizedBox(
              height: 50.0,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('이전 페이지로'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenC'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'ScreenC',
              style: TextStyle(fontSize: 24.0),
            ),
            SizedBox(
              height: 50.0,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('이전 페이지로'),
            ),
          ],
        ),
      ),
    );
  }
}

Kapture 2021-10-14 at 15 22 48

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy