[Flutter] 플러터의 화면 전환 구현

[Flutter] 플러터의 화면 전환 구현

 

화면 전환에는 다양한 종류가 있다

• 버튼을 눌러 다른 화면으로 이동
• 한 화면 내 여러 탭이 있어 탭만 전환
• 팝업창 띄우기

 

화면 전환의 구현

Navigator 이용해 구현

 

첫번째 화면

//screen/first_screen.dart

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:flutter_basic_01/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( //push: 다음 화면을 쌓겠다는 의미
              MaterialPageRoute(builder: (BuildContext context) => SecondScreen(), //materialpageroute: navigator가 이동할 경로 지정
              ),
            );
          }, 
          
          
          child: Text('Go to second'))
        ],
      )),
    );
  }
}

 

두번째 화면

//screen/second_screen.dart

import 'dart:html';

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: (){
              //뒤로가기 구현 by pop
              Navigator.of(context).pop();
              
            }, child: Text('go to first screen'))
          ],
       
        ),

      )
    );
  }
}

main.dart

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

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

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

 

화면이동시 데이터 전달

screenData라는 변수 이용해 전달

//screen/second_screen.dart

import 'dart:html';

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  
  final String screenData; //전달할 데이터
  SecondScreen({required this.screenData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('screenData: ' + screenData),
            OutlinedButton(onPressed: (){
              //뒤로가기 구현 by pop
              Navigator.of(context).pop();

            }, child: Text('go to first screen'))
          ],
       
        ),

      )
    );
  }
}

//screen/first_screen.dart

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:flutter_basic_01/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( //push: 다음 화면을 쌓겠다는 의미
              MaterialPageRoute(builder: (BuildContext context) => SecondScreen(
                screenData: 'data from first screen',
              ), //materialpageroute: navigator가 이동할 경로 지정
              ),
            );
          }, 
          
          
          child: Text('Go to second'))
        ],
      )),
    );
  }
}