[Flutter] 화면 전환

 Flutter의 모든 화면 전환 관련 이벤트는 Navigator라는 위젯을 통해 처리된다. Navigator를 활용하면 특정 화면으로 이동하거나 이전 화면으로 돌아가는 등의 기능을 구현할 수 있다.

 

예제는 lib 하위에 screens 라는 디렉토리를 추가하여 first_screen과 second_screen Class를 생성하여 버튼으로 두 화면을전환하는 방식으로 작성하려 한다.

 

바로 한번 확인해보자.

---

◎main.dart

import 'package:flutter/material.dart';
import 'package:first_flutter_ex/screens/first_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
         primarySwatch: Colors.green
       ),
       home: FirstScreen()
     );
  }
}

 

◎first_screen.dart

import 'package:flutter/material.dart';
import 'package:first_flutter_ex/screens/second_screen.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()
                   ),
                 );
              },
              child: Text('Go to Second Screen'),)
          ],
        ),
      )
    );
  }
}

위 코드는 main에 처음으로 띄울 first screen이다. button의 onPress 함수를 살펴보자.

 

Navigator.of(context)로 시작하는데, 이는 현재 위젯인 Scaffold 화면에서 이동하겠다는 뜻이며, 여기에 .push 를 추가하여 다음 화면을 띄우겠다는 것이다.

 

또한 MaterialPageRoute를 통해 Navigator가 이동할 경로를 지정한다. MaterialPageRoute에는 새로운 화면인 SecondScreen을 빌드하는 방식으로 이동하는 것이다.

 

◎second_screen.dart

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'),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Go to First Screen'),)
            ],
          ),
        )
    );
  }

}

이동한 second screen에서 다시 first screen으로 돌아오려면, push()로 쌓았으니 pop()으로 다시 제거해주면 된다.

 

Navigator를 활용하면 생각보다 화면 전환을 간단하게 구현할 수 있다.

---

이제 화면 간에 데이터를 전달하는 방식을 알아보자.

 

◎second_screen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  String? screenData;

  SecondScreen({required this.screenData});

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

}

 위와 같이 second screen에서 넘겨 받을 데이터를 선언해준 뒤에 

 

◎first_screen.dart

import 'package:flutter/material.dart';
import 'package:first_flutter_ex/screens/second_screen.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(
                         screenData: 'Data from FirstScreen'
                       )
                   ),
                 );
              },
              child: Text('Go to Second Screen'),)
          ],
        ),
      )
    );
  }
}

second screen을 build하여 push하기 때문에 build하는 과정에서 생성자가 데이터 인자를 넘겨주도록 하면 된다. 

---

 push와 pop에는 여러 메서드들이 있는데, 이 그림을 보면 좀 더 직관적으로 이해할 수 있다.

https://www.technicalfeeder.com/2021/11/flutter-page-transition/