Flutter에서 화면 이동하기

Flutter에서는 Navigator을 통해 화면 사이를 전환할 수 있습니다. Flutter에서 화면(Screen, Page)는 Route라고 하는데요, (참고로 Route는 Android의 Activity, iOS의 ViewController와 같은 개념입니다) Navigator는 stack 기반으로 route들을 관리하는 위젯입니다. Flutter에서 Route 사이를 탐색하는 방법을 소개합니다.

화면 전환 방법

1. 네비게이터 위젯 사용

새 화면으로 이동하기 위해 Navigator 위젯을 사용하여 스택에 새 Route를 푸시할 수 있습니다. 이전 화면으로 돌아가려면 스택에서 최상위 Route를 Pop하면 됩니다.

// Push
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// Pop
Navigator.pop(context);

Push 함수는 Context와 함꼐 Route를 매개변수로 요구합니다. MaterialPageRoute은 전체 화면을 플랫폼 적응형 전환으로 대체하는 Modal route입니다. 적절한 번역 표현이 생각이 안나서 문장이 어색하긴 한데, 전체화면으로 된 모달 창 위젯을 생성한다고 보면 될 것 같습니다. MaterialPageRoute의 builder 매개변수는 생성할 Route를 지정해 줍니다. 위 예제의 경우 SecondScreen 위젯이 생성되면서 헤당 route로 이동하게 됩니다.

2. Named Route 사용

Named route를 사용하면 route이름과 위젯을 매핑할 수 있습니다. 이렇게 하면 route 이름을 지정하여 특정 화면으로 쉽게 이동할 수 있습니다.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/second': (context) => SecondScreen(),
  },
);

위 예제에서 MaterialApp 위젯은 / 와 /second라는 route 이름을 지정했습니다. 그리고 HomeScreen 위젯은 / route에 매핑되었고SecondScreen 위젯은 /second route에 매핑되었습니다. SecondScreen 위젯으로 이동하려면 pushNamed 함수를 통해 이동할 수 있습니다.

Navigator.pushNamed(context, '/second');

예제 코드

1. 첫번째 방법을 사용하여 작성된 전체 코드입니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FirstScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstScreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SecondScreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

2. 두번째 방법을 사용하여 작성된 전체 코드입니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstScreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SecondScreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

3. 결과 화면

※ Reference

https://api.flutter.dev/flutter/widgets/Navigator-class.html
https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html