플러터 화면 전환 구현

화면전환구현

 

파일생성

 

화면전환을 구현하기 위해 화면 1,2 생성

 

 

main.dart

 

import 'package:flutter/material.dart';
import './screens/screen1.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'OpenSans'),
        home: const FirstScreen());
  }
}

 

screen1.dart란 파일을 import한 후,

실행 시 첫번째 화면을 띄우도록 home 프로퍼티에 FirstScreen()을 넣었다.

 

 

screen1.dart

 

import 'package:flutter/material.dart';
import 'package:flutter_application_1/screens/screen2.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        const Text('This is Frist Screen'),
        ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) => const SecondScreen(),
                ),
              );
            },
            child: const Text('두 번째 페이지로'))
      ])),
    );
  }
}

 

버튼 클릭 시 2번째 화면을 빌드하는 코드이다.

 

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

화면 이동은 버튼을 클릭했을 때 이루어지며, onPressed 안에 내용을 작성하였다.

 

Navigator.of(context)는 현재 위젯(화면)을 뜻하며

.push는 다음 화면을 쌓겠다는 의미이다.

 

MaterialPageRoute를 통해 새로운 화면인 SecondScreen()을 빌드한다.

 SecondScreen()은 import한 screen2.dart에 해당한다.

 

 

screen2.dart

 

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        const Text('This is Second Screen'),
        ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('첫 번째 페이지로'))
      ])),
    );
  }
}

 

버튼 클릭 시 첫번째 화면으로 돌아가는 코드이다.

 

.pop()을 이용해 .push()로 쌓은 스택을 제거하여 뒤로 가기를 구현한다.

 

 

 

화면 전환 시 데이터 넘기기

 

screen2.dart

 

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key, required this.screenData}); // 생성자 선언
  final String screenData; // 변수 선언

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text('ScreenData: $screenData'), // 문자열 추가
        ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('첫 번째 페이지로'))
      ])),
    );
  }
}

'screenData' 라는 String 변수 선언 후  생성자를 선언해 준다.

Text위젯 안에 screenData라는 문자열을 넣어준다.

 

 

screen1.dart

 

builder: (BuildContext context) => const SecondScreen(
  screenData: 'Hi',
),

 

screenData의 값을 전달해 준다.

첫 번째 화면이 2번째 화면을 생성할 때 String을 전달하도록 수정한다.

 

 

실행화면

 

FristScreen()에서 생성한 데이터를 SecondScreen()으로 넘겨주는 구조이다.

화면전환과 동시에 데이터가 전달된 걸 확인할 수 있다.

secondScreen에서 뒤로 가기 버튼(<)을 눌러도 첫 번째 화면으로 이동할 수 있다.