[Flutter] 버튼을 누르면 페이지 이동 (with chatGPT)

Flutter... Dart문법 모른다.... 아무것도 모른다... 그렇지만? 나에게는 chatGPT가 있지!
 
GPT에게 지난 시간 자기소개를 하는 화면을 물어봤었다. 
거기에서 이제 페이지 이동을 넣고 싶어서 버튼을 누르면 페이지 이동이 되게 GPT와 대화를 나누고 구글링을하며 코드를 작성했다. 
사실 이미지 넣는 것만 구글링하고 GPT가 코드 거의 다 짜줬다.
GPT.... 옛날에는 미워했는데..지금은 참 고마운 존재이다. (내 밥그릇...위험하지만...)
 

버튼을 누르면 페이지 이동이 되는 페이지를 만들어보자

main.dart

import 'package:flutter/material.dart';
import 'ScreenB.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Introduction App',
      home: ScreenA(),
    );
  }
}

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Me'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          CircleAvatar(
            radius: 50,
            backgroundImage: AssetImage('assets/profile_picture.jpg'), // Add your profile picture asset path
          ),
          SizedBox(height: 20),
          Text(
            '정유진',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 10),
          Text(
            'Flutter Developer',
            style: TextStyle(
              fontSize: 16,
              color: Colors.grey,
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Text(
              '안녕하세요. SKT FLY AI 패기반 정유진입니다.',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
              ),
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: ElevatedButton(
              child: Text("Go to Screen B Page"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => ScreenB()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

 

ScreenB.dart

import 'package:flutter/material.dart';

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen B'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            CircleAvatar(
              radius: 50,
              backgroundImage: AssetImage('images/keroro.jpg'), // 추가한 이미지 파일 경로
            ),
            SizedBox(height: 20),
            Text(
              '취미 소개',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 10),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Text(
                '제 취미는 닌텐도 스위치 하기, \n'
                    '애니메이션이랑 유튜브 보기,\n'
                    '청소하기,\n'
                    '잠자기입니다.\n',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18,
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context); // 이전 화면으로 돌아가기
              },
              child: Text('Go back to Screen A'),
            ),
          ],
        ),
      ),
    );
  }
}

이미지 넣기 위한 준비사항

• pubspec.yaml의 assets 부분에 폴더/이미지 경로의 주석을 풀고 자신에게 맞는 경로로 설정
• 이를 위해서는 pubspec.yaml과 같은 경로에 images든 원하는 이름으로 이미지를 담아둘 폴더를 만들고 그 안에 이미지를 넣어둔다.

 
정말 간단한 버튼 클릭 이벤트이지만 이러한 것들이 모여 무언가가 되지 않나 싶다.