꾸준히 개발할 만두

Responsive UI를 만들기 위해선 다양한 화면크기에서 자연스러운 Widget 배열을 만들어내야한다. Flutter에서 Widget을 화면 비율로 따져서 상대적인 Width와 Height를 지정해주고 싶은 경우는 어떻게 해야할까? 1) FractionallySizedBox 라는 Widget을 사용하기 2) 화면 너비와 높이를 직접 읽어와 크기 지정하기 MediaQuery.of(context).size.width를 사용해 화면의 너비를 직접 읽어와 비율을 계산해서 사용하는 방법이다. MediaQuery.of(context).size.width * 0.80 // 80%의 비율을 차지하고 싶은 경우

동기의 예시 void aFunction(){ //step1 print('Hello Moon!'); //step2 syncLoad('image from 'NASA'); //step3 print('Hello jupiter!'); } step 1 -> step 2 -> step 3 step 2 이미지 load에 특정 시간 소요된다. 하지만 step 3는 step2가 완료될 때까지 실행할 수 없다. 비동기의 예시 void aFunction(){ //step1 print('Hello Moon!'); //step2 asyncLoad('image from 'NASA'); //step3 print('Hello jupiter!'); } step2 이미지 load되는 동안 기다리지 않고, step3 먼저 출력한다. 고객이..

Boolean은 True 와 False 두 가지의 option을 가지고 있다. Enum은 그 이상의 option으로 특정 변수의 값을 나타낼 수 있다. 예를 들어 "요일"이나 "계절" 을 표현할 때, 요일은 월,화,수,목,금,토,일 이렇게 7가지로 나타낼 수 있고, 계절은 봄,여름,가을,겨울 4가지 계절로 한정된 값으로 나타낼 수 있다. 이러한 경우 Enum을 사용하면 편리하다. Enum 사용법 enum Season { spring, summer, fall, winter } Season myFavoriteSeason = Season.spring; print(myFavoriteSeason); // spring

Flutter에서 여러 개의 페이지 간 이동을 구현하도록 돕는 Routes & Navigation에 대해 학습했다. 페이지를 Stack과 유사하게 push해서 쌓고, pop해서 다시 지워내는 방법으로 이동시킨다. Flutter 공식 문서 : [flutter.dev/docs/cookbook/navigation/navigation-basics] class FirstRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Route'), ), body: Center( child: ElevatedBut..

Widget이 계속해서 반복되는 경우, Extract Widget을 사용해 개별적인 Widget으로 해당 Widget을 추출해낼 수가 있다. vscode를 사용하고 있는 경우, 1) 원하는 Widget위에 커서를 놓는다. 2) 전구 모양을 클릭한다. 3) Extract Widget을 누른다. 만약 내가 reusableCard라는 Widget을 추출해냈다면, StatelessWidget을 확장한 class가 생성된다. Widget을 사용할 때 따로 설정하고 싶은 값들이 있다면, Class 내부에서 변수로 지정해준 후, Widget 사용시 해당 값을 지정해주면 된다, 예를 들어 ReusableCard의 경우 Container의 color(colour) 와 GestureDetector의 onTap에 대한 함수..

다트에서 final과 const 키워드를 통해 변수에 설정한 값을 변경할 수 없도록 하는 기능을 제공한다. final String myName = 'chaewon'; const int studentNumber = 123; 위에서 정의된 myName과 studentNumber은 다른 값으로 변경할 수 없다. 다른 값으로 변경하려고 시도하면 컴파일 오류가 발생한다. final과 const의 차이점 컴파일 타임에서 상수를 정의할 수 있다. 즉 const로 정의한 상수는 런타임에서 정의되는 값을 설정할 수 없다. 런타임에서 결정되는 값도 설정할 수 있다. 예를 들어 DateTime.now()의 경우 런타임에서 함수 호출될 때마다 결과 값이 다르다. 이러한 값은 const로 설정할 수 없다. final DateT..

Row에 Icon들을 넣는 과정에서 A RenderFlex overflowed by 58 pixels on the right 메세지가 떴다. Icon이 화면 범위를 넘어서면 Icon을 유연하게 아래로 이동시키는 방법은 없는지 구글링해보았다. SafeArea를 써보고, Expanded도 써보고, Flexible을 써보고 이런저런 방식을 적용해보다가 Wrap이라는 Widget을 발견했다! Container( child: Wrap( children: [ ... ], ), ), Container로 감싸고 child로 Wrap 위젯을 Row대신 넣어주었더니, 아래와 같이 만족스러운 결과를 얻었다. Flutter Widget Video: youtu.be/z5iw2SeFx2M

https://youtu.be/lkF0TQJO0bA SafeArea() : 범위 침입을 피하기 위해서 충분한 패딩으로 child 자식을 삽입하는 위젯이다.

기본 Flutter app Icon에서 원하는 Icon으로 변경하기 사진 다운로드 https://appicon.co/ 에서 원하는 icon size 추출해 저장 android android > app > src > main > res 위의 경로에 다운로드 받은 파일로 덮어쓰기 ios ios > runner > Assets.xcassets 위의 경로에 파일 덮어쓰기 다양한 모양의 Icon image size 편집 Android Studio android > app > src > main > res > 우클릭 > new > image Asset Android Studio 에서는 가능하지만, vscode 에서는 불가해 따라서 따로 편집해야한다.

Flutter에는 Hot reload와 Hot restart를 사용할 수 있다. 매번 compile & run 을 해야하는 번거로움을 덜어준다. 변경된 코드의 부분만 적용해 짧은 시간 내에 simulator를 통해 화면을 출력할 수 있다. Hot reload [번개 모양 아이콘] state를 유지하며, app의 build method를 재실행한다. 코드 변경 후에 저장하면 자동으로 Hot reload가 실행된다. Hot restart [번개 모양 아이콘 우측] stless 새로운 state를 생성하면서 app을 reset한다. tip! stless 입력 → stateless widget 자동 생성