[Flutter] 화면 이동 Navigator(push, pop)과 데이터 전달

Navigator

 모든 화면 전환 관련 이벤트는 Navagator 이라는 위젯을 통해 처리된다.

Navigator을 활용하면 화면을 특정 화면으로 이동하거나, 이전화면으로 돌아가는 등의 기능을 구현한다.

 

 화면이동은 버튼을 눌렀을 때에 일어나도록 구현.

 

 

 

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

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

 

import 'package:flutter/material.dart';
import 'package:myflutter/SecondScreen.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is First Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push( // push 다음 화면을 쌓겠다
                                            // 두번째 페이지 pop으로 부터 결과를 기다림
                  MaterialPageRoute( // MaterialPageRoute를 통해 이동할 경로 설정
                    builder: (BuildContext context) => SecondScreen(),
                  ),
                );
              },
              child: Text('Go to Second Screen'),
            )
          ],
        ),
      ),
    );
  }
}

 

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Second Screen'),
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).pop(); // pop
              },
              child: Text('Go to First Screen'),
            )
          ],
        ),
      ),
    );
  }
}

FirstScreen.dart 파일에서 push는 말 그대로 다음 화면을 쌓겠다는 의미이다.

SecondScreen을 보면 정의한 적 없는 화살표 모양이 생겼는데 이 버튼은 Scaffold의 appBar에 적용되어 있는 기본 기능이다. 뒤로 이동 가능한 상태라면 뒤로 가기 버튼이 자동으로 활성화 된다. 

뒤로가기 버튼, 'Go to Firse Screen' 버튼 둘 다, 첫번째 화면이 나타남

 

 

 

 데이터 전달은 어떻게 이루어지나?

다양한 방법이 있겠지만 생성자를 활용해 데이터를 전달해보겠다. 클래스의 생성자에 인자를 넣으면 클래스를 통해 객체를 생성할 때 객체 내의 변수에 해당 인자 값이 저장 된다. 

이를 활용해보자.

 

import 'package:flutter/material.dart';
import 'package:myflutter/SecondScreen.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is First Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                  // 그저 생성자로 데이터를 전달해주기만 했을 뿐
                    builder: (BuildContext context) => SecondScreen( 
                      data: '나는야 데이터',
                    ),
                  ),
                );
              },
              child: Text('Go to Second Screen'),
            )
          ],
        ),
      ),
    );
  }
}

 

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  final String data;
  SecondScreen({required this.data}); //생성자 선언

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('data :' + data ), // 여기에 나타나게
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).pop(); // pop
              },
              child: Text('Go to First Screen'),
            )
          ],
        ),
      ),
    );
  }
}

 

 

결과는 ??