나만의 개발 블로그

📋글의 순서 Route의 개념 Navigator의 정의 stack 자료 구조 MaterialPageRoute위젯과 context 페이지 이동 기능 구현 실습 🙆‍♂️Route의 개념 Flutter의 Navigator에서 Route가 뜻하는 것은 " 스마트폰에서 보여지는 하나의 페이지나 화면 " 입니다. 🙋‍♂️Navigator의 정의 Navigator란 모든 페이지를 관리하고 스택구조로 Route들을 관리합니다. Navigator 위젯으로 앱 내에 페이지 이동을 할 수 있습니다. Push와 pop 메소드를 통해서 stack을 관리를 합니다. 🤷‍♂️stack 자료구조 Stack 자료 구조는 Last-in First-out 구조입니다. Push 메소들르 통해서 데이터를 상주시킬 수 있고 Pop 메소드를 통..

🙆‍♂️BuildContext 1. BuildContext는 widget tree에서 현재 widget의 위치를 알 수 있는 정보다. 이 명령어에서 볼 수 있듯 build 함수는 Widget 타입이고 context변수는 BuildContext 타입입니다. build 함수에 인자값으로 들어갑니다. 그래서 Scaffold를 return 하는데 BuildContext가 담긴 인자값을 대입해서 해당 위치에 있는 Scaffold 위젯을 반환하는 것입니다. 2. BuildContext는 stateless 위젯이나 state 빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다. 이 상황에서 BuildContext에는 MyPage에 대한 경로 정보가 담겨있는 것입니다.

🙆‍♂️main.dart 작성 텅 비어있는 main.dart입니다. 먼저 dart를 import 해줘야 합니다. 🚀import 1. i를 누르고 import ' ';를 소환 2. 작은따옴표 안에 fm을 작성 후 package:flutter/material.dart 를 자동완성 (그냥 입력해도 상관없습니다.) 완성 🚀main() 1. 함수가 끝나면 다른 값을 반환하지 않는다고 main()함수를 void로 선언합니다. 2. fat arrow(=>)를 사용해서 runApp 함수를 호출합니다. 3. runApp()함수는 인자값으로 MyApp()이라는 클래스를 호출해서 실행합니다. 🚀stateless widget 1. stl을 눌러서 Flutter Stateless Widget을 자동완성 되도록 합니다. 이렇게 ..

먼저 이 게시물을 보고 오셔야 합니다. 🙆‍♂️ 애뮬레이터 사용해서 디버그 하기 보기(View) > 명령 팔래트(command)를 하거나 Ctrl+Shift+P를 해서 명령 팔래트를 띄웁니다. 그리고 flutter: Select Device를 입력하고 설치했던 모바일 에뮬레이터를 선택합니다. 그러면 이렇게 스마트폰 UI가 나오는데 이렇게 끝나는 것이 아니라 VS Code에서 F5를 하거나 실행 > 디버깅 시작을 해줘야 비로소 작성하고 있는 어플이 나오게 됩니다.

🙆‍♂️ Flutter 파일 구조 플러터 프로젝트를 생성하면 이렇게 많습니다. 🚀pubspec.yaml pubspec.yaml 파일은 프로젝트의 메타데이터를 정의하고 관리하는 파일입니다. 프로젝트의 버전, 사용 환경, dart의 버전이나 라이브러리 등을 정의합니다.

🙆‍♂️Widget 플러터에서 위젯은 모든 UI를 만들고 구성하는 기본 단위라고 생각하시면 됩니다. 이렇게 텍스트, 이미지, 버튼 등등이 위젯으로 이루어져 있습니다. 코드를 확인해보면 다른 언어의 함수와도 어느정도 닮아있습니다. 뿐만아니라 레이아웃을 구성하는 모든 요소들도 위젯으로 이루어져 있습니다. 웹에 비유해보면 div태그도 위젯 p태그도 위젯 모든 태그를 위젯으로 생각하시면 됩니다. 심지어 가로정렬을 해주는 Row 위젯과 세로정렬을 해주는 Column위젯 가운데 정렬 해주는 Center위젯 등 위치 정렬에 대한 위젯들도 존재합니다. 🚀Stateless Widget stateless 위젯은 상태가 없는 정적인 위젯입니다. 변화가 없는 위젯이라고 생각할 수 있습니다. 특징으로는 스크린상에 존재만 할 뿐..