Flutter 화면이동 Coding

하나하나 배워나가는 것이 재미있다고 봐야 하나... 미래의 먹거리로 생각하고 힘들게 공부를 해야 하나 하는 혼돈 속에 있습니다만 언어는 늘 새로우면서도 특히나 개발언어는 살아있는 생물이기에 지금 배운 것이 다음 버전에는 어떻게 별할지 약간은 두렵기도 한 것은 사실입니다.

 

화면 이동 Coding

화면 이동하는 것 역시도 이렇게 Coding을 해야 하는군요. 그래도 다행인 것은 많은 부분을 Google에서 만들어놨고 그 내용을 불러와서 적어놓기만 하면 된다는 사실이 참 대단합니다. 좀 더 배우면 자유도가 높아질 것으로 생각합니다만 아직 강사의 내용들이 잘 머리에 안 들어오는군요. 기본이 얼마나 중요한지 다시 한번 느끼게 됩니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context2) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to the Second Page'),
          onPressed: (){
            Navigator.push(context2, MaterialPageRoute(
                builder: (context) => SecondPge()));
          }),
      ),
    );
  }
}

class SecondPge extends StatelessWidget {
  const SecondPge({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
            child: Text('Go to the First Page'),
            onPressed: () {
              Navigator.pop(ctx);
            }),
      ),
    );
  }
}

 

결과물

첫페이지

두번째 페이지

 

화면의 가운데 "Go to the Second Page"와 "Go to the First Page"를 누르면 화면이 전환됩니다. 아울러 두번째 페이지의 좌측 상단에 화살표가 생성됐는데요. 이건 자동 생성된 아이콘입니다. Navigator.pop을 사용해서 생긴듯합니다. 이것 역시 제거하는 명령어가 있을 것으로 생각됩니다.