Flutter/UI Widget 9

[Flutter] Slider Widget (+ ValueChanged<double>)

목차 Slider 위젯 사용설명 onChanged 와 같은 parameter가 있는 callback 함수의 타입 Slider 위젯 사용설명 Slider( min: 0.1, // 최솟값: double max: 10.0, // 최댓값: double divisions: 99, // 구간 갯수 (탁탁 걸리는 구간): int value: threshold, // 현재 값(최솟값, 최댓값 사이): double onChanged: (double value) { // 값이 바뀔 때 실행되는 콜백함수 print(value); }, label: threshold.toStringAsFixed(2), // 선택 했을때 나오는 Label, // 소수점 2째자리까지 표현 ), onChanged 와 같은 parameter가 있는 ..

Flutter/UI Widget 2023.04.10

[Flutter] BottomNavigationBar & TabBarView (+ TickerProviderStateMixin)

목차 TabBarView & BottomNavigationBar 위젯 소개 Sample Code(TabController) TickerProvideMixin(애니메이션 효율) & vsync(수직동기화) 1. TabBarView & BottomNavigationBar 위젯 소개 Flutter 에서 TabBarView는 아래와 같은 Widget을 의미합니다. TabBarView와 BottomNavigationBar를 연결하면 아래와 같이 시중에 가장 많이 사용되는 형태의 앱을 만들 수 있습니다. 2. Sample Code 일반적으로 보이지 않는 이해 안 되는 키워드가 존재할 것입니다. 'TickerProviderStateMixin'와 'vsync' 는 아래에서 따로 설명 하겠습니다. TabBarView와 B..

Flutter/UI Widget 2023.04.10

[Flutter][Cupertino Widget] DatePicker (기본설명포함)

목차 플러터 디자인 시스템 Material Design System(구글, 안드로이드) Cupertino Design System(애플, iOS) showCupertinoDialog() 안녕하신가 DatePicker를 활용한 사용방법 1. 플러터 디자인 시스템 플러터에서는 두 가지 디자인 시스템을 지원합니다. 두 디자인 시스템 모두 패키지이며 import 로 추가해야 사용할 수 있습니다. 구글 스타일의 디자인: Material Design System import 'package:flutter/material.dart'; 애플 스타일의 디자인: Cupertino Design System import 'package:flutter/cupertino.dart'; 2. showCupertinoDialog() ..

Flutter/UI Widget 2023.04.07

[Flutter] PageView class (scrollable page list)

Define PageView class PageView는 스와이프를 통해 하위 위젯들을 렌더링 할 수 있는 UI Widget 입니다. 보통 한 화면에 한 페이지를 구현하는데, PageView를 사용하면 한 화면에서 여러 페이지를 책처럼 넘겨볼 수 있도록 구현할 수 있습니다. - 스크롤 가능한 페이지 리스트 - 각 하위 위젯들은 강제로 같은 사이즈가 됩니다. - PageView를 제어할 수 있는 PageController를 제공해 줍니다. - Ex) 인스타 스토리, 스크롤 되는 앱 상단 광고 배너 등 - PageView + Timer 는 일정 시간 마다 넘어가는 광고 배너를 만들 수 있다. Function 1) 페이징 방향 변경(scrollDirection: Axis.vertical) 2) 페이지 넘김 보..

Flutter/UI Widget 2023.04.06

[Flutter] SystemChrome class (SystemUI Control)

운영체제에서 제공하는 그래픽 인터페이스(시스템 UI)의 특정 부분과 어플 간의 상호작용을 제어합니다. 즉, 시스템 UI 의 색상이나 모드를 변경 가능하고 앱 실행 방향이나 변경 이벤트를 전달 받을 수 있습니다. Static Method of SystemChrome class 함수 설명 setEnabledSystemUIMode() 앱의 풀스크린 모드를 지정합니다. (예를 들어 핸드폰 상단의 시간이나 배터리 잔량이 보이지 않게 가릴 수 있습니다.) setPreferredOrientations() 앱을 실행하는 방향을 지정합니다. (가로, 가로좌우반전, 세로, 세로좌우반전 옵션이 있습니다.) setSystemUIChangeCallback() 시스템 UI 가 변경되면 콜백함수를 실행합니다. setSystemUI..

Flutter/UI Widget 2023.04.06

[Flutter] BoxFit enum

Image Widget을 비롯한 영역을 채울 때 사용하는 BoxFit 에 대한 포스팅이다. 사용방법은 다음과 같습니다. Image.asset( 'assets/img/image_$x.jpeg', fit: BoxFit.fill, ), Constants values → const ListA constant List of the values in this enum, in order of their declaration. BoxFit의 values에는 아래와 같이 7개의 상수값이 있습니다. 이제 그 특징에 대해 알아봅시다. [fill, contain, cover, fitWidth, fitHeight, none, scaleDown] Values 1) fill → const BoxFit Fill the target ..

Flutter/UI Widget 2023.04.06

[Flutter] StatelessWidget vs StatefulWidget

목차 StatelessWidget vs StatefulWidget StatelessWidget StatelessWidget Life Cycle StatelessWidget 특성 StatefulWidget StatefulWidget 특성 StatefulWidget Life Cycle StatefulWidget Life Cycle 이해를 돕기위한 3가지 예시 상태변경이 없는 생명주기 StatefulWidget 생성자의 매개변수가 변경됐을 때 생명주기(Stateful을 이해하기 좋음) State 자체적으로 build() 를 재실행할 때 생명주기 1. StatelessWidget vs StatefulWidget StatelessWidget: 위젯 내부에서 값이 변경되어도, 위젯 자체적으로 다시 렌더링할 수 없는..

Flutter/UI Widget 2023.04.06

[Flutter] 로딩 위젯(ProgressIndicator)

Flutter에는 로딩 시 사용하는 위젯이 두 개 존재한다. 1. LinearProgressIndicator(추후 업데이트 예정) 2. CircularProgressIndicator LinearProgressIndicator, CircularProgressIndicator 모두 background와 valueColor라는 색상 매개변수를 제공한다. - backgroundColor: 위젯의 배경 색상을 의미한다. 기본적으로 셋팅된 동그라미 형태에 색을 지정하는 것이다. - valueColor: 애니메이션으로 움직이는 부분의 색상을 의미한다. 색상이 애니메이션이 되어야 하기에 AlwaysStoppedAnimation이라는 클래스에 감싸서 색상을 제공해야한다. (직접 구현하니 color을 지정해도 잘 동작한다..

Flutter/UI Widget 2023.03.27

[Flutter] 기본 위젯 알아보기

Flutter는 선언형 UI를 갖는다. 'Everthing is a Widget' 구글에서 플러터를 소개하는 문구입니다. 플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있습니다. 위젯은 현재 주어진 상태를 기반으로 어떤 UI를 구현할지를 정의합니다. 즉, 플러터는 선언형 UI로 구성되어 있습니다. 명령형 UI 와 다르게 선언형 UI의 경우 View를 실행 중 생성하지 않습니다. 처음 생성된(선언한) UI에 대하여 값에 따른 변화를 주는 방식으로 구성되어 있습니다. 그래서 값에 따른 변화로 인해 View의 오버헤드를 신경쓰지 않아도 되니 생산성이 올라갑니다. 제가 생각하는 선언형 UI는 다음과 같습니다. "미리 선언을 해두어 형태가 정해져 있고, 상태(값, State)에 따른 형태..

Flutter/UI Widget 2023.03.27