[Flutter] 페이지 이동 (Navigator) [맥북💻]

 목차

 

1. 페이지 이동
   1. 메인 페이지 구성
      
      1. GesturDirector 위젯
   2. 두 번째 페이지 구성

 

 

 

✅ 페이지 이동

 

 

 

1️⃣ 메인 페이지 구성

1. GestureDirector 위젯으로 onTap(클릭 작동될 기능) 구성

1. GestureDirector 위젯으로 onTap(클릭 작동될 기능) 구성

 

2️⃣ 두 번째 페이지 구성

1. lib 폴더 파위에 두 번째 페이지(second.dart) 파일 생성
2. stf 입력 후 엔터
3. Class명 입력 후 'flutter/material.dart' import
4. return 값으로 Scaffold 위젯 구성
5. AppBar 에 '뒤로가기' 버튼 구성
6. 메인 페이지로 넘어가 에러 발생하는 Method import

1. lib 폴더 파위에 두 번째 페이지(second.dart) 파일 생성 / 2. stf 입력 후 엔터

 

3. Class명 입력 후 'flutter/material.dart' import

 

4. return 값으로 Scaffold 위젯 구성

 

5. AppBar 에 '뒤로가기' 버튼 구성

 

6. 메인 페이지로 넘어가 에러 발생하는 Method import

 

 

 

3️⃣ 화면 테스트

 

 

 

 

 

 

✔️ 사용된 코드

class _MyHomePageState extends State<MyHomePage>{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(
              builder: (_) => SecondView(),
          )),
          child: Container(
            padding: EdgeInsets.all(15),
            color: Colors.blue,
            child: Text("Get Started"),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  State<SecondView> createState() => _SecondViewState();
}

class _SecondViewState extends State<SecondView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios), // '뒤로가기' 화살표
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: const Text("Test App"),
      ),
      body: Center(
        child: Container(
            padding: EdgeInsets.all(15),
            color: Colors.blue,
            child: Text("Second View"),
        ),
      ),
    );
  }
}