Foggy day

이번 포스팅에서는 Flutter가 어떤 방식으로 위젯을 그리는지 알아보겠습니다. 1. Flutter 3개의 Tree 2. Widget tree 3. Element tree 4. RenderObject tree 5. 마무리 1. Flutter 3개의 Tree Flutter에는 3개의 Tree가 있습니다. Widget tree, Element tree, RenderObject tree입니다. 3개의 tree는 재사용성을 이용해서 더 좋은 성능을 발휘하기 위한 구조입니다. 물론 개념적으로 tree가 있으며, 도식화는 할 수 있지만 개발자가 직접 코드로 작성할 필요는 없습니다. Flutter 개발자가 직접 손보는 것은 Widget tree입니다. 2. Widget tree Widget tree는 개발자가 사용하..

이번 포스팅에서는 GridView 위젯에 대해 알아보겠습니다. GridView는 ListView와 동일한 특성들이 많습니다. 그래서 ListView에는 없는 내용들만 다루겠습니다. 중복된 내용들은 ListView 포스팅을 참고해 주시기 바랍니다. https://jinhan38.tistory.com/134 [Flutter] ListView - 사용법 이번 포스팅에서는 ListView 위젯에 대해 알아보겠습니다. 1. 기본 사용법 2. shrinkWrap 3. cacheExtent 4. itemExtent, prototypeItem 5. ListView.builder, ListView.seperated 1. 기본 사용법 ListView의 기본 사용법은 간단합 jinhan38.com 1. 기본 사용법(Grid..

이번 포스팅에서는 ListView 위젯에 대해 알아보겠습니다. 1. 기본 사용법 2. shrinkWrap 3. cacheExtent 4. itemExtent, prototypeItem 5. ListView.builder, ListView.seperated 1. 기본 사용법 ListView의 기본 사용법은 간단합니다. children에 위젯들을 전달해 주면 됩니다. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("ListViewScreen"),), body: _body(), ); } Widget _body() { return ListView( children: _listItem()..

이번 포스팅에서는 SingleChildScrollView에 대해 알아보겠습니다. 1. child 2. padding 3. ScrollController 4. scrollDirection 5. physics 6. keyboardDismissBehavior 7. primary 8. reverse 1. child SingleChildScrollView는 child위젯을 받는 스크롤이 가능한 위젯입니다. ListView가 children을 받는 것과는 다르게 child를 받기 때문에 보통 child로 Column, Row, ListBody를 많이 사용합니다. 예제에서는 ListBody를 사용했습니다. Column과 ListBody의 큰 차이점이라면 Column은 가로넓이를 자식에게 맞추지만 ListBody는 최..

이번 포스팅에서는 Image Widget에 대해 알아보겠습니다. 각각의 항목에 설명과 이미지를 첨부했고, 페이지 하단에는 전체 코드를 올렸습니다. 내용이 다소 길고 모든 것을 표현하기 어려운 부분이 있었습니다. 궁금한 점 있으면 댓글로 문의해 주시기 바랍니다. 1. BoxFit 2. Alignment 3. width, height 4. opacity 5. cacheWidth, cacheHeight 6. color, colorBlendMode 7. filterQuality 8. loadingBuilder, frameBuilder 1. BoxFit BoxFit enum 클래스에는 7가지 타입이 있습니다. contain : 이미지의 비율을 유지하면서 가능한한 크게 그려집니다. (기본값) fill : 이미지가 ..

Text Widget을 살펴보니 자주 사용하지는 않지만 잘 활용하면 도움이 될만한 특성들이 많았습니다. 그래서 이번 포스팅에서는 Text 위젯에 대해 상세히 알아보겠습니다. 그림으로 이해하는 것이 필요한 특성들은 이미지와 함께 따로 설명하고 있으며, 그 외의 특성들은 코드에 주석으로 달아놨습니다. 1. TextStyle 여러 가지 텍스트 스타일을 적용해 봤습니다. 자세히 설명하지는 않고, 코드와 주석으로 대체하겠습니다. full code는 페이지 하단에 있습니다. TextStyle( fontSize: 20, height: 2, color: Colors.green, fontWeight: FontWeight.bold, backgroundColor: Colors.orange.shade50, /// 자간 let..

PopupMenuButton은 버튼을 클릭했을 때 팝업으로 여러 항목들을 보여줄 수 있는 위젯입니다. 위젯의 사용법이 약간 까다롭고, 디테일한 UI를 수정하는 부분에서 어려움이 있었습니다. 그래서 각각의 특성들을 한 번 자세히 알아보겠습니다. 특성들에 대한 설명은 주석으로 상세히 달아놓았고, 아이템을 클릭할 때 splashColor설정이 안 돼서 Theme위젯을 사용했습니다. Full code import 'package:flutter/material.dart'; class PopupMenuButtonScreen extends StatefulWidget { const PopupMenuButtonScreen({Key? key}) : super(key: key); @override State createS..

Row위젯은 가장 많이 사용하는 위젯 중 하나로 위젯들을 가로로 배치시키고 싶을 때 사용합니다. 처음에는 사용법이 헷갈릴 수도 있지만 몇 개의 특성들만 이해한다면 손쉽게 사용할 수 있습니다. Row는 Column 위젯과 형태가 흡사합니다. 단지 기준 축이 가로라는 것이 다릅니다. 그래서 MainAxisAlignment와 CrossAxisAlignment만 잘 이해해도 수월하게 사용할 수 있습니다. MainAxisAlignment MainAxisAlignment는 가로 축으로 자식 위젯들을 어떻게 배치할지를 결정합니다. MainAxisAlignment에는 6가지 타입이 있습니다. 각 타입별로 자식 위젯들이 어떻게 배치되는지 그림으로 표현해 뒀습니다. Row( mainAxisAlignment: MainAxi..

이번 포스팅에서는 MVVM 패턴에 대해서 알아보겠습니다. MVVM 패턴은 Model, View, ViewModel의 줄임말입니다. 이 패턴을 사용하는 이유는 UI를 그리는 View와 데이터클래스인 Model, 데이터들을 담고 있는 ViewModel을 따로 관리하기 위해서입니다. 따로 관리한다는 것은 의존성을 줄여줌으로써 유지보수의 편의성과 오류의 가능성을 줄여줄 수 있다는 것을 의미합니다. 또한 특정 데이터가 변경됐을 때 UI의 변경도 쉽게 구현할 수 있습니다. 이번 MVVM 패턴 앱에서는 상태관리 라이브러리를 사용하지 않습니다. ChangeNotifier와 ValueListenableBuilder, ValueNotifier, ValueNotifierList(커스텀으로 만든 클래스), AnimatedBu..

Flutter에서 가장 많이 사용하는 위젯 중 하나인 Column 위젯에 대해 알아보겠습니다. Column은 자식 위젯들을 세로로 배치시킬 수 있는 LayoutWidget입니다. 1. 기본 red, blue 컬러의 컨테이너 두개를 Column의 자식 위젯으로 입력했습니다. 아무 특성을 주지 않았기 때문에 Column의 최상단에 자식 위젯들이 순서대로 그려졌습니다. Column( children: [ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 100, height: 100, color: Colors.blue, ), ], ); 2. MainAxisAlignment 이번에는 green 컨테이너를 추가하고, 컨테이너들을..