Foggy day

이번 포스팅에서는 Flutter의 Constraints에 대해 알아보겠습니다. Flutter 개발자들은 작업을 하면서 overflow 에러를 자주 볼 것입니다. 그리고 특정 위젯이 원하는 위치와 사이즈로 그려지지 않아서 많은 시간을 낭비하기도 할 것입니다. 이러한 시간을 절약하고, 어려움을 이겨내기 위해서는 Flutter의 constraints 규칙을 이해하는 것이 도움 될 수 있습니다. 1. constraints의 핵심 2. Limitations 3. Tight vs loose constraints 1. constraints의 핵심 Flutter constraints의 핵심은 다음 문장입니다. Flutter의 위젯 트리를 어떻게 구성하고 있냐고 질문한다면 아래의 문장이 가장 핵심이라고 할 수 있습니다...

이번 포스팅에서는 FloatingActionButton에 대해 알아보겠습니다. FloatingActionButton은 Scaffold 위젯과 함께 사용합니다. 화면에 floating 한(떠있는) 버튼을 만들고, 이 버튼을 특정 위치에 배치할 수 있습니다. 그리고 화면을 전환할 때 hero애니메이션을 추가할 수 있어서 다이내믹한 효과를 줄 수 있습니다. 1. 기본 사용법 2. 디자인 변경 3. hero 애니메이션 1. 기본 사용법 FloatingActionButton을 사용하기 위해서는 Scaffold위젯이 필요합니다. Scaffold 위젯의 floatingActionButton 특성에 FloatingActionButton 위젯을 넘겨주기만 하면 됩니다. 아래 코드를 입력한다면 우측 이미지 처럼 화면 오른..

이번 포스팅에서는 BottomnavigationBar에 대하여 알아보겠습니다. 많은 앱들에서 하단의 버튼을 사용해 페이지를 전환하는 UI를 사용하고 있습니다. 자주 사용되는 기능이기 때문에 Scaffold위젯과 BottomNavigationBar를 사용하면 손쉽게 해당 UI를 구현할 수 있게 구성돼 있습니다. 1. 기본 사용법 2. currentIndex, onTap 3. showSelectedLabels, showUnselectedLabels 4. 기타 특성들 1. 기본 사용법 우선 Scaffold위젯의 bottomNavigationBar 특성에 BottomNavigationBar 위젯을 넘겨줘야 합니다. BottomNavigationBar 위젯에는 BottomNavigationBarItem 클래스를 ..

이번 포스팅에서는 Scaffold 위젯에 대해 알아보겠습니다. Scaffold 위젯은 대부분의 화면에서 가장 상위 레벨에서 사용하는 위젯입니다. 사실 Scaffold 위젯은 MaterialApp의 탑 레벨 위젯으로 사용되기 위해 고안된 위젯입니다. Scaffold 위젯이 가지고 있는 기능들을 한 페이지에서 모두 다루기는 어려울 것 같습니다. 때문에 AppBar, BottomNavigationBar, FloatingActionButton, Drawer는 다른 글에서 상세히 다루겠습니다. https://jinhan38.tistory.com/126 [Flutter] AppBar 사용법 이번 포스팅에서는 AppBar의 사용법을 알아보겠습니다. AppBar는 대부분 Scaffold위젯과 함께 사용됩니다. 새로운 ..

이번 포스팅에서는 DefaultTabController, TabBar, TabBarView에 대해 알아보겠습니다. TabBar는 따로 상세히 다룬 페이지가 있으니 확인해 주시기 바랍니다. DefaultTabController, TabBar, TabBarView는 좌우 스와이프가 가능한 탭 페이지 형식의 UI를 만들어줍니다. 아래 영상으로 먼저 어떤 형태인지 확인해보겠습니다. 많은 앱들에서 볼 수 있는 구조입니다. 중요한 것은 TabBar와 하위 페이지들을 어떻게 연결시킬건가 입니다. 그런데 DefaultTabController와 TabBarView를 사용하면 손쉽게 연결할 수 있습니다. TabBarView는 PageView와 동일한 기능을 하지만 TabBar와 연결이 수월합니다. TabBar와 PageV..

이번 포스팅에서는 PageView Widget에 대해 알아보겠습니다. PageView는 페이지를 좌우나 상하로 애니메이션 전환할 수 있는 위젯입니다. 대부분의 앱에서 사용하는 기능입니다. 1. 기본 사용법 2. 스크롤 방향 전환(scrollDirection) 3. 기타 특성 4. PageController 정보 확인 5. PageController 페이지 이동 1. 기본 사용법 기본적인 사용법은 간단합니다. PageView를 생성하고 children으로 사용할 위젯들을 넣어주기만 하면 됩니다. 그러면 좌우로 스와이프 해서 화면을 변경할 수 있는 PageView가 됩니다. import 'package:flutter/material.dart'; class PageViewScreen extends Statef..

이번 포스팅에서는 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로 인해 발생되는 오류는 매우 치명적입니다. 때문에 대부분의 개..