Flutter

Flutter 시작하기

flutter.dev 로 이동 후 Get Started 버튼 클릭운영체제에 맞는 버전 설치.WindowsChocolatey이용 Chocolatey.install로 이동Individual 선택 PowerShell 관리자의 권한으로 실행해당 명령어 순서대로 실행해당명령어

Flutter 설치 Error 해결과정 Flutter doctor 1. flutter doctor 진행 시 CocoaPods가 설치되어있지 않아 에러 -> 에러메세지에 따라 설치 진행

HelloWorld Widget Widget이란, UI를 구성하는 기본단위이다. 앱은 위젯을 조립해가며 만든다. StatefulWidget StatefulWidget이란 어떤 상태값을 가지고 있으며, 해당 상태값에 의해 화면에 움직임이나 변화를 표현할 때 사용 St

Column은 수직방향으로 배치하는 위젯Row는 수평방향으로 배치하는 위젯mainAxisAligment는 주축으로 정렬하는 위젯Column일 경우 수직방향, Row일 경우 수평방향이다.center는 주축을 기준으로 가운데 정렬start는 주축을 기준으로 왼쪽(위쪽) 정

EdgeInsets.all()은 left, right, top, bottom의 padding을 일괄 적용EdgenInsets.only()은 left, right, top, bottom의 padding값을 선택하여 적용EdgeInsets.symmetric()은 수평, 수

1.설정 클릭2.Command Palette 클릭3. Open User Settings(JSON) 입력코드 자동수정1\. Open User Settings2. preview 검색Extensionts/Dart/Experimental선택Preview Flutter UI G

Container는 자식 위젯을 한개 포함하며, 크기를 지정할 수 있다.크기를 지정하지 않으면 자식 위젯의 크기에 맞춰지고, 자식 위젯이 없거나 크기가 지정되어 있지 않으면 width와 heighnt은 최대값으로 고정된다.UI커스텀 하기 좋다.Container의 dec

Icon 아이콘 입력Icons.에서 원하는 아이콘 찾아서 사용가능

child를 원하는 각으로 회전child를 원하는 크기로 조정child를 원하는 위치로 이동

StatefulWidget은 변경 가능한 상태를 가진 widgetstful을 치고 엔터를 누르면 자동완성이 된다.setState(() {});을 호출해야 flutter에서 state변경을 감지하고 적용한다.

BuildContext란 위젯 트리에서 위젯의 위치를 다루는 것Flutter안에 모든 Widget은 내부에 bulid method를 가지고 있다.그리고 그 build method의 타입은 Widget이고 인자 값으로 BuildContext를 가진다.bulid metho

if문이나 switch문은 식(expression)이 아니라 문(statement)이기 때문에 expression처럼 단일 값으로 평가하게 해줘야만 사용 가능즉시 실행 함수 표현식((){}),()으로 단일 값을 리턴하게 해주는 방식으로 if문(또는 switch)을 사용

Theme Theme는 앱 전체에서 특정한 색상이나 글꼴을 통일시켜주기 위해 사용 >참조 다쥬니의 코딩이야기

Life Cycle, Flutter 가 Stateful widget을 build할 때, 처음으로 위젯의 constructor(생성자) fuction을 실행한다. 그리고나서, createState() method를 호출한다. Stateful widget에서는 constr

박스를 일정 비율로 나누고 싶을 때 Flexible사용, flex로 비율 조절하나의 박스가 화면을 차지하게 하기 위해서는 Expanded사용Expanded는 flex:1을 가진 Flexible 박스랑 같다혼자서만 flex:1을 가지면 박스가 화면을 꽉 채우지만 위처럼

dart:async 패키지에 포함. 일정간격동안 반복하여 동작 수행할 때 사용

Flutter나 Dart 패키지를 찾고싶으면 pub.dev 방문.

Future은 미래의 값을 의미.Future은 비동기로 처리되어야 할 값을 의미한다. 예를 들어 우리가 서버로부터 데이터를 받아올때 서버로 부터 응답값을 받을때까지 우리는 기다려야 한다. 혹은 사용자가 어떤 버튼을 누를지 기다려야한다. 이럴떄 Future을 사용한다.F

FutureBuilder는 Future와 상호작용한 마지막 스냅샷으로 자신을 빌드하는 위젯이다.만약 FutureBuilder가 없다면 데이터가 다 받아지기를 기다린 후 화면을 그리거나 데이터가 변함을 setState()를 통해 바꾸어 주어야 한다.snapshot객체에는

ListView는 가장 일반적으로 사용되는 스크롤 위젯.스크롤 방향으로 자식을 차례로 표시한다.기본 생성자. child\[]는 명시적인 List<Widget>을 사용. 자식이 적을때 사용하기 적절하다. 실제로 표시되는 항목만이 아니라 모든 하위항목에 대해 작업을

< project root directory > /web/index.html{ renderer:"html" } 코드 추가참조@thovy

flutter에서 제스처를 감지하기 위해 GestureDetector위젯 사용기본적인 onTap()(터치)부터 길게터치(GestureTapCallback), 끌기(GestureDragStartCallback/GestureDragEndCallback), 강제누르기?(Ge

Navigator로 Route들을 관리한다.Screen이나 page라고 불리는 위젯Route를 관리하는 위젯다른페이지로 이동push를 사용하기 위해서는 context와 route가 필요.route에는 MaterialPageRoute클래스를 사용한다.MaterialPag

MaterialPageRoute는 앱 내 페이지 전환을 위한 라우터를 제공하는 위젯Material Design권장 사항에 따라 애니메이션 제공ios에서는 슬라이드 전환 에니메이션, Android에서는 Fade 애니메이션과 같이 플랫폼별로 알맞은 전환 제공참조qlr222

참조기계공학하던 안드로이드 개발자

참조기계공학하던 안드로이드 개발자

Hero

flutter 앱은 pub.dev에서 제공되는 플러그인 sqflite 을 통해 SQLite 데이터베이스를 활용할 수 있다.sqflite 패키지 설치sqflite는 SQLite 데이터베이스와 상호 작용하는 클래스와 함수를 제공path 패키지 설치path는 디스크에 데이터

ERROR

TextField를 사용하면 사용자가 앱에 텍스트를 입력할 수 있다.TextField는 가장 일반적으로 사용하는 텍스트 입력 위젯업로드중..업로드중..참조flutter.dev

키보드가 올라오면서 화면에 오버플로우가 발생하는 현상TextField overflow 해결방법키보드가 올라와도 텍스트 필드 영역이 온전하게 보일 때 사용하기 좋음scaffold의 속성 resizeToAvoidBottomInset을 false로 설정.키보드가 올라왔을 때

then은 Future클래스에 있는 함수로 Future의 결과가 완료되면 호출되는 함수이다. await과는 다르게 동기방식으로 코드의 진행을 막지 않는다.async 와 Buildcontext는 같이 사용할 수 없으므로 then 을 사용하여 처리한다.

Widget을 밖으로 뺄 경우 부모의 위젯의 함수를 받아서 호출 할 수 있다.부모자식

showDatePicker를 통해 날짜를 선택할 수 있다.initialDate는 처음 설정된 날짜이며firstDate ~ lastDate 기간 내 날짜를 선택할 수 있다.

Dismissible은 List에서 특정 아이템을 좌, 우로 움직였을 때, 특정 action을 취하고 아이템이 사라지도록 하는 widget이다.Listview의 item을 dismissible로 감싸준다.backgroundchild 아래에 있어서 child widget

ShowDialog와 AlertDialog를 활용하여 팝업 메세지를 구현할 수 있다.ShowDialog는 일반적으로 Dialog를 빌드하는데 사용필수 속성으로 context와 builder를 같는다.barrierDismissible은 팝업메세지가 띄워졌을 때 뒷배경의

Radio Button은 그룹내에서 하나만 선택할 때 사용그룹이 되는 항목을 열거형으로 정의하고 group Value 프로퍼티에 열거형으로 정의한 변수를 지정, onChaged 이벤트에서 변경된 값을 반영.라디오 버튼을 터치해야 인식가로 전체가 터치영역참조밥먹고코딩하자

PlatformException은 네이티브 플러그인이 제대로 설치 안되었을 때 나타나는 현상이다.실행을 중지하고 터미널에서 flutter clean을 실행한 후 다시 실행하면 해결됨참조인프런

Image Picker는 사진첩에서 이미지를 가져오거나 새롭게 카메라로 이미지를 찍어서 가져올 때 사용한다.특별히 추가할 사항 Xios/Runner/Info.plist에추가(은 설명인듯..?)ImagePicker객체와 이미지를 담을 변수 선언이미지를 선택하도록 하는 함

image_picker로 가져온 이미지를 sqflite를 이용해 DB에 저장path_provider와 dart:io library를 이용해 파일을 쓰고 지우는 방법도 있다고 하지만 그건 추후 정리Uint8List은 고정된 길이의 8bit의 부호없는 정수 List이다테이

Flutter 에서는 2가지 방법으로 애니메이션을 구현할 수 있다.암묵적 애니메이션(Implicit animation) : 미리 정의된 스타일과 애니메이션을 사용하기 때문에 구현이 아주 간단하다.명시적 애니메이션(explicit animation) : 애니메이션을 직접

노치(Notch) 디자인이란 스마트폰의 화면 비중을 극한으로 끌어올리기 위해 만들어진 디자인으로 안드로이드에서는 디스플레이 컷아웃이라고 한다.전면부 전체를 화면으로 쓰게 되면서 전면 카메라, 수화부 등을 넣은 공간이 스크린 일부를 차지하게 되면서 화면이 파인 것처럼 보

Daraggeable클래스는 위젯을 드래그 할 수 있도록 만들어주며 드래그 관련 동작들을 처리할 수 있게 해준다.child : 드래그 할 대상이 되는 위젯feedback : 드래그 되는 동안 터치 포인트 위치에 그려질 위젯childWhenDragging : 드래그 되는

assets/images/ 폴더 생성 및 assets/images/경로에 이미지 파일 추가pubspec.yaml파일에 - assets/images/파일이름.확장자 또는 - assets/images/ 추가프로젝트의 TERMINAL에서 flutter pub get

flutter에서 화면 크기를 얻기위해 MediaQuery 클래스 사용MediaQuery클래스에는 화면 크기 외에도 여러가지 기기의 시스템 정보들을 담고있다.(텍스트 배율, 24시간 포맷 유무, 기기 방향(orientation)등등)위의 값들은 실제 픽셀 값이 아닌 논