FrameWork/Flutter

FrameWork/Flutter

Navigator을 통한 화면 전환과 위젯 필수 매개변수 받기

이번에는 Navigator을 이용한 화면전환과, 위젯에서 필수 매개변수를 받는 방법에 대해서 정리해보고자 한다. Navigator을 이용한 화면전환 플러터에서는 Navigator의 push() 메소드를 통해 화면전환이 가능하다. Navigator.push()에 전환할 페이지를 MaterialPageRoute()에 넣어주면 된다. - main.dart Navigator.push(context, MaterialPageRoute(builder: (context) => FirstScreen())); 다음은 화면 전환의 예제이다. 만약에 전환할 페이지에 매개변수를 넘겨야 한다면, 전환할 페이지의 ()안에 매개변수를 적어서 넘겨주면 된다. - main.dart import 'package:flutter/materi..

FrameWork/Flutter

StatefulWidget와 StatelessWidget 알아보기

이번에는 StatefulWidget와 StatelessWidget에 대해서 정리해보고자 한다. 생명주기 일단 StatefulWidget, StatelessWidget을 논하기전에, 생명주기에 대해서 이해할 필요가 있다. 생명주기란 위젯의 시작점에서 끝점까지 이르는 과정에 대한 주기를 의미한다. 윗 그림에서 왼쪽은 Stateless, 오른쪽은 Stateful 생명주기를 나타낸다. Stateless 일단 Stateless의 과정을 먼저 살펴보자. Stateless는 Constructor과정에서 생성되고, build에서 작업을 진행한다. 여기서 눈여겨 봐야할 점은 Stateless는 라이프사이클안에서 모든 과정, build가 단 한번만 이루어진다는 것이다. Stateful 반면 Stateful은 Constru..

FrameWork/Flutter

Flutter 프로젝트 디렉토리 구조, 위젯 알아보기

이번에는 플러터를 다루기전에 알아두면 좋은 여러가지 기초 지식에 대해서 다뤄보고 그에 대한 내용을 정리하고자 한다. 프로젝트 디렉토리 구성 일단 플러터 프로젝트를 만들게 되면 수많은 디렉토리가 추가가 된다. 이 중에서 우리가 자주 다루는 부분은 lib폴더 안에 있는 main.dart라는 파일이고 나머지 andriod, ios는 우리가 만든 main.dart 라는 파일을 안드로이도나, IOS로 변환 시켜 줄때 어떻게 설정해야 하는지에 대한 부분으로, 그 외의 부분은 따로 설정해주지 않아도 된다. 만약에 웹뷰를 포함한 패키지가 필요할 경우에는 pubspec.yaml에 패키지의 정보가 담기게 되니 이를 참고하자. 위젯 위젯이란 화면에 보이게 하는 모든 요소를 의미한다. 우리는 이제 main.dart에서 코드..

FrameWork/Flutter

WillPopScope을 통해 뒤로가기 버튼 기능 활성화 하기

이번에는 WillPopScope을 통해 뒤로가기를 누르면 전 화면으로 넘어가도록 하는 방법에 대해 정리한다. 흔히 아이폰이나 현재 나오고 있는 안드로이드 폰 같은 경우 뒤로가기 버튼이나 홈 버튼 없이 제스쳐를 통해 해당 행동을 제어하고 있다. 하지만 그 반대의 경우로 홈, 뒤로가기 버튼이 존재한다면 해당 버튼을 눌렀을 때, 재 역활을 할 수 있도록 설정하여야 한다. WillPopScope willPopScope 위젯은 주로 Scffold 위젯을 감싸서 뒤로가기 버튼을 제어할때 자주 사용한다. 사용 방법은 리턴하는 Scaffold 부분을 willPopScope로 감싸고, onWillPop을 통해 이를 제어한다. 현재 여기서 사용하고 있는 컨트롤러는 https://jheaon.tistory.com/220 여..

FrameWork/Flutter

웹 뷰(WebView) 사용하기

이번에는 플러터를 통해 웹뷰를 어떻에 실행시킬 수 있는지에 대해 정리하고자 한다. 웹 뷰 (Web View) 패키지 설치 플러터에서 웹 뷰를 사용하기 위해서는 패키지를 설치하여야 한다. 일반적으로 Dart 언어에서 다루는 패키지는 pub.dev에서 확인 할 수 있으므로 해당 사이트에서 적절한 패키지를 찾아 설치하고, 패키지를 어떻에 사용하는지에 대해서 설명이 있으므로 이를 활용하여 사용하는 방법을 익혀나가는 것을 추천한다. https://pub.dev/ Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general D..

FrameWork/Flutter

안드로이드 스튜디오 zsh: command not found: flutter 오류 해결 방법

상황 Flutter 설치 후, 환경 변수 설정을 했었는데 맥의 iterms 터미널에서는 flutter 명령어가 잘 먹히는데, 안드로이드 스튜디오에서 연 터미널에서는 flutter 명령어를 수행하지 못하는 상황이었다. 해결 처음에 플러터 영상을 보고 Flutter 환경 변수를 지정하는 과정에서 아래 명령어를 통해 zshrc 파일에 들어간 뒤, 아래 구문을 추가하였다. # 터미널에서 code ~/.zshrc 입력 export PATH="$PATH:`pwd`/flutter/bin" 하지만 이는 안드로이드 스튜디오에 연결되어 있는 터미널에서는 인식을 하지 못해서, 경로를 아래와 다시 수정했다. # 터미널에서 code ~/.zshrc 입력 export PATH="$PATH:$HOME/flutter/bin" # 적..

FrameWork/Flutter

Flutter 맥에서 설치하고 기본 설정하기

이번에는 맥에서 플러터를 설치하고, 환경 설정을 하는 방법에 대해 소개하고자 한다. 플러터 설치 플러터 설치를 위해서 공식 홈페이지에 들어간다. 공식 홈페이지 : https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flutter.dev 맥 유저 같은 경우에는 intel 버전 맥에서 설치할껀지 애플 실리콘 버전 맥을 설치 할껀지 물어보는데 이는 자신의 맥 종류에 따라 다르므로 확인 후 다..

JHeaon
'FrameWork/Flutter' 카테고리의 글 목록