<aside> 💡 앱 개발에서 화면 이동을 위해서는 내비게이션을 사용해야 한다.

</aside>

Stack

스택 내비게이션은 화면 위에 화면을 표시하는 방식으로 화면을 이동한다. 화면 위에 화면을 표시할 때에는 push를, 위에 표시된 화면을 제거할 때에는 pop을 사용한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigator'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Second Screen'),
          onPressed: () {//스택 내비게이션을 사용하여, 화면 위에 새로운 화면을 화면에 위에 표시하기 위해서는 Navigator 위젯의 push함수를 사용할 필요가 있다.
            Navigator.push(//push 함수를 호출할 때, 위젯 트리의 위치 정보를 담고 있는 context와 MaterialPageRoute의 builder를 사용하여 화면위에 표시할 위젯을 파라메터로 전달해야 한다.
              context,
              MaterialPageRoute(
                builder: (_) => SecondScreen(),
              ),//Home 위젯에 표시된 버튼을 누르면, Home화면 위에, SecondScreen 위젯이 표시되게 된다.
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Home Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Named routes

Flutter에서 여러 화면을 관리할 때, Named routes를 사용할 수 있다.

import 'package:flutter/material.dart';
import 'ScreenA.dart';
import 'ScreenB.dart';
import 'ScreenC.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: 'ScreenA',
      routes: {
        'ScreenA': (context) => ScreenA(),
        'ScreenB': (context) => ScreenB(),
        'ScreenC': (context) => ScreenC(),
      },
    );
  }
}

Named routes를 사용하기 위해서 MaterialApp에서 routes에 화면의 이름과 해당 이름의 화면 위젯을 선언한다.

home 파라메터 대신 initialRoute를 사용하여 앱이 실행된 뒤 표시될 첫 화면 위젯을 정의한다.

Screen A 구조

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen A'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Screen B'),
              onPressed: () {
                Navigator.pushNamed(context, 'ScreenB');
              },//Named routes를 사용하여 스택 내비게이션을 사용하기 위해서는 Navigator 위젯의 pushNamed 함수를 사용하면 된다.
            ),//이때, 위젯 트리의 위치 정보를 가지고 있는 context와 이동하고 싶은 화면의 이름을 파라메터로 전달하면 된다.
            ElevatedButton(
              child: Text('Second C'),
              onPressed: () {
                Navigator.pushNamed(context, 'ScreenC');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Screen B와 C도 동일한 구조이다.

popUntil