Flutter 6

[제철음식 알리미] 2. 화면 요소: Flexible, Expanded, Positioned

제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다.  1. Stack과 Positioned 이전 글에서 플러터의 화면 요소들은 기본적으로 Stack으로 쌓인다는 것을 공부했다. 그리고 Stack 요소 자체를 추가하여 화면을 구성할 수도 있다. 예를 들어 아래의 화면처럼 음식의 목록 화면이 존재하고, 음식 목록 화면의 스크롤 여부와는 별개로 그 위쪽에 겹치도록 광고 화면을 구성하고 싶을 수 있다. 이럴 때 화면의 아래에서부터 위로 쌓아나가는 Stack과 고정된 위치를 지정할 수 있는 Postioned 요소를 사용하면 된다.return Stack(children: [ Builder(builder: (context) { return Container( ... 음식 목록 화면에 사용된 C..

[제철음식 알리미] 1. 화면구성: Stack, Navigator, PageView

제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다.  1. Stack 플러터의 화면은 기본적으로 Stack으로 구성되어있다. Stack에 페이지를 한 겹씩 쌓아나가는 구조이다. 화면 전환을 할 때 Stack에 페이지들을 쌓을 수도 있지만 이전 stack을 없애고 새로운 stack만 존재하도록 할 수 있다. 그리고 뒤로가기를 누르면 하나의 Stack을 제거하는 구조이다. 1.1 페이지 스택 쌓기 원리 이해제철음식 알리미에서는 홈, 검색 페이지가 있다. 페이지 전환 시 스택과 관련된 로직은 아래와 같다. 앱에 접속하면 홈 페이지 스택이 쌓인다.검색 버튼을 누르면 검색 페이지 스택이 추가로 쌓인다.이 상태에서 뒤로 가기를 누르면, 검색 페이지 스택이 제거되면서 이전 홈 페이지 스택으로 돌아간다.홈 페이..

[TIL] 플러터-dev_dependencies, caret(^) version, weekly_date_picker(slider)

dependencies 와 dev_dependencies의 차이 dependencies는 일반적인 의존성 관리, dev_dependencies는 개발할 때만 포함되는 의존성을 정의해놓는 부분이다. 나중에 프로그램이 동작하기 위해 build되어 Artifact 파일로 변환될 때, dependencies에 정의된 패키지들은 포함되지만 dev_depdencies에 포함된 라이브러리들은 포함되지 않는다. version 앞 caret(^) 기호 ^1.2.3 = 1.x.x 버전까지 계속 업데이트가 호환됨을 의미한다. 메이저 버전의 호환성을 지켜주는 문법이다. ^은 caret으로 라틴어로 부족함을 의미한다. [lib]DatePickerDialog 아래 사진처럼 기본 디자인의 날짜 피커를 생성한다. [lib]weekl..

Project/MyNature 2023.06.18

Flutter 기본-1. flutter 프로젝트, main.dart의 기본구조와 간단한 속성들

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.https://www.youtube.com/@codingchef 코딩셰프향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다!www.youtube.com 1. 프로젝트 구조Android Studio에서 flutter project를 생성하면 아래 그림처럼 기본 구조를 만들어준다.android, ios, macos, linux, windows: 안드로이드, ios 등 다른 플랫폼을 지원하기 위한 빌드용 파일lib: 앱을 만드는데 필요한 파일 모음. 앱 개발은 대부분 여기서 한다.pubspec.yaml: 프로젝트 설정파일나머지 디렉토리들은 다른 ..

[책]Flutter in Action - 1. 다트(DART) 기본 문법

책 정보: Flutter in Action / 에릭 윈드밀 지음, 우정은 옮김 / 한빛미디어 플러터는 구글에서 개발, 다트(DART)라는 자바와 비슷한 OOP이자 강타입인 언어를 기반으로 한다. 이번 글에서는 자바와 다른 특징적인 문법들만 기록해보았다. 1. 변수 동적 형식 지정자: dynamic, var String, int와 같이 직접 타입을 지정하지 않아도 되도록 해준다. 동적 형식 지정자가 필요한 경우는 JSON처럼 Map 타입을 사용할 때이다. JSON은 key값은 String이지만 value는 다른 형식이 될 수 있기 때문이다. 그러나 꼭 필요한 경우가 아니라면 형식을 제한하는 것이 기본이다. Map json; var와 dynamic의 다른점은 var는 변수의 형식을 제한할 때만 사용할 수 있..