Flutter 공부하기 - Navigator 위젯을 통해 화면 전환하기 #1

오늘은 Navigator 위젯을 통해 화면 전환하는 방법을 공부해봤습니다.

 

main.dart를 통해서 첫 main_page 내에 있는 MainPage 위젯을 불러오도록 했습니다. 

 

페이지별로 나눠서 관리하는 습관을 만들어두는게 나중에 복잡한 앱을 만드는데 있어서 도움이 될 것 같아 단순한 테스트라도 여러개의 파일로 나눠서 하도록 노력하고 있습니다.

main_page.dart에서는 second_page.dart에 있는 위젯을 불러오기 때문에 import를 해줍니다.

 

MainPage 위젯을 Stateless 위젯으로 선언해주고 간단하게 앱바와 바디 내에는 ElevatedButton 하나를 생성해둡니다.

 

그리고 onPressed 함수 내에 Navigator.push 를 통해 second_page 파일 내에 있는 SecondPage 위젯으로 옮겨지도록 구현해봅니다. Navigator 위젯의 작동원리는 Stack과 동일하다고 하는데요. Push, Pop을 통해서 기존 페이지 위에 Push를 통해 다음 페이지를 보여주고 Pop을 통해서 다시 이전페이지로 돌아갈 수 있다고 합니다.

second_page.dart 내에 SecondPage 위젯을 하나 만들어 놓고 AppBar와 ElevatedButton을 하나 더 구현해놨습니다.

여기에 있는 버튼에는 onPressed 함수 내에 Navigator.pop 함수를 구현해 놨습니다. 

 

여기서 context 라는 단어는 현재 위젯의 위치를 뜻하고 있습니다. 

위 코드들을 실행하면 다음과 같이 버튼을 누르면 화면이 첫 번째 페이지 및 두 번째 페이지를 왔다갔다 하는 것을 확인할 수 있습니다.

 

 

import 'package:flutter/material.dart';
import 'main_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 App',
      home: MainPage(),
    );
  }
}
 

 

import 'package:flutter/material.dart';
import 'second_page.dart';
 
class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);
 
  @override 
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to next page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}
 
 

 

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: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to previous page'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}