Foggy day

이번 포스팅에서는 TabBar 위젯에 대해 알아보겠습니다. TabBar위젯은 주로 여러 페이지를 동시에 사용할 때 페이지 전환을 위해 사용합니다. 때문에 혼자 사용되는 경우는 거의 없고, PageView와 같이 사용할 때가 많습니다. 1. 기본 사용법과 TabController 2. Label style 3. Splash Effect 4. IndicatorWeight, indicator color 5. Indicator Type 6. Paddings 7. Custom indicator 8. Tab scrollable 9. OnTap callback 10. TabController 1. 기본 사용법과 TabController TabBar는 각각의 탭 역할을 할 Tab 위젯들이 필요합니다. tabs속성에 T..

이번 포스팅에서는 Button 위젯의 예제를 만들어봤습니다. Flutter에서 클릭에 대한 액션은 GestureDetector, InkWell, Button을 사용해 구현합니다. Button 위젯들에는 기본적으로 설정된 UI가 있어서 간단히 구현하기에는 GestureDetector와 InkWell이 더 편리합니다. 하지만 클릭 이벤트를 좀 더 다이내믹하게 구현하고 싶다면 Button 위젯들을 사용하는 것도 좋은 방법입니다. ElevatedButton, TextButton, OutlinedButton 버튼은 동일한 방법으로 style을 설정할 수 있습니다. 그래서 셋 중 한개의 버튼을 선택해서 스타일을 입혀 사용하고 있습니다(개발자마다 다름). IconButton은 다른 특성들이 있기 때문에 따로 구현했습..

이번 포스팅에서는 Stack위젯에 대해 알아보겠습니다. 1. Non-positioned 2. 배치 순서 3. Positioned 4. Positioned.fill 5. 예제 Stack 위젯은 자식 위젯들을 겹치게 배치할 수 있는 위젯입니다. Stack 위젯에 자식은 Positioned or Non-positioned로 구분할 수 있습니다. Positioned 위젯으로 자식 위젯을 래핑하면 Positioned 상태가 됩니다. Non-positioned는 Positioned 위젯을 사용하지 않은 일반 위젯입니다. Non-positioned인 경우 Stack의 Alignment에 따라서 자식 위치가 결정됩니다. 기본값은 왼쪽에서 오른쪽 환경의 경우 왼쪽 상단 모서리이고, 오른쪽에서 왼쪽 환경의 경우 오른쪽 상..

이번 포스팅에서는 Dart null-safety와 null 사용법에 대해 알아보겠습니다. 일반적으로 변수는 특정한 값을 가지고 있습니다. String name = "홍길동"; 하지만 프로그래밍 언어에는 null이라는 개념이 있습니다. 모든 개발자들을 무섭게 하는 개념입니다. 그럼 null이 무엇이냐? null은 값이 존재하지 않거나 아예 할당되지 않았다는 의미입니다. 변수가 null인지 모르고 사용하다보면 Null Point Exception라는 심각한 오류가 발생합니다. 그렇다고 null 자체가 문제인 것은 아닙니다. 특정 변수에 null이라는 값을 넣어서 아직 할당하지 않거나 비어있는 값이라는 것을 나타낼 수도 있습니다. 하지만 null로 인해 발생되는 오류는 매우 치명적입니다. 때문에 대부분의 개..

이번 포스팅에서는 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..