[Flutter] 플러터 페이지 이동

Flutter 화면생성

FirstPage

 import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
              ElevatedButton(onPressed: (){
             
              }, child: Text('Go To SecondPage')),
          ],
        ),
      ),

    );
  }
}

SecondPage

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
  const SecondPage({super.key});

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SecondPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: (){

            }, child: Text('Go To FirstPage')),
          ],
        ),
      ),
    );
  }
}

Navigator를 이용한 화면 전환 - Push,Pop

Navigator.push() 메서드를 이용해서 화면 전환이 가능합니다. MaterialPageRoute() 안에 전환할 페이지인 SecondPage()를 넣어주면 됩니다.

Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));

Navigator.pop() 메서드로 전페이지로 이동할 수 있습니다.

 Navigator.pop(context);

FirstPage

버튼을 클릭하면 페이지 이동을 하도록 ElevatedButton의 onPressed 메서드 안에 작성해줍니다.

import 'package:flutter/material.dart';
import 'package:testpage/secondPage.dart';

class FirstPage extends StatefulWidget {
 const FirstPage({super.key});

 @override
 State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('FirstPage'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
             ElevatedButton(onPressed: (){
               Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));

             }, child: Text('Go To SecondPage')),
         ],
       ),
     ),

   );
 }
}

SecondPage

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
 const SecondPage({super.key});

 @override
 State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('SecondPage'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           ElevatedButton(onPressed: (){
             Navigator.pop(context);

           }, child: Text('Go To FirstPage')),
         ],
       ),
     ),
   );
 }
}