Clein's Tistory

Widget of the Week #5 Opacity 위젯을 반투명하게 또는 안보이게 할 수 있는 위젯 flutter.dev Reference Opacity class - widgets library - Dart API A widget that makes its child partially transparent. This class paints its child into an intermediate buffer and then blends the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensi api.flutter.dev

Widget of the Week #4 AnimatedContainer setState를 통해 Container를 변경 가능하게 하는 Widget이라는데 아직 사용해본적이 없어서. 딱히 설명할게 없다. flutter.dev Reference AnimatedContainer class - widgets library - Dart API Animated version of Container that gradually changes its values over a period of time. The AnimatedContainer will automatically animate between the old and new values of properties when they change using the pr..

Widget of the Week #3 Wrap 위젯을 자동 줄바꿈? 정도 되는 컨터이너? 정도로 생각하면 된다. 딱히 뭐 설명할게 없다. html5의 flex에서 flex-wrap 생각하면 이해하기 쉽다. flutter.dev Reference Wrap class - widgets library - Dart API A widget that displays its children in multiple horizontal or vertical runs. A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing..

Widget of the Week #2 Expanded Expanded의 대표적인 기능은 이름에서 알 수 있듯이 확장 시키는 것이다. Column이나 Row Widget의 마지막에 Expanded를 넣어주면 나머지 여백을 전부 채운다. 두번째는 Flex이다. Expanded는 Flex 속성값을 설정 할 수 있어서 Widget의 크기를 비율로 조정할 수 있다. html5에서와 같은 기능을 한다. cf) Row 안에 TextField를 그냥 넣으면 console 창에 다음과 같은 메시지를 볼 수 있다. 사이즈가 어쩌고 저쩌고... 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' 근데, TextFiel..

Widget of the Week #1 SafeArea SafeArea는 기기별로 다른 StatusBar 등의 영영에 자동으로 padding을 넣어주는 역할을 한다. 특히 Stack 등으로 앱 레이아웃을 제작하는 경우 기기마다 다르게 표시되는 경우가 많아 대환장 파티를 할 수 있는데, SafeArea안에서 놀게 되면 깔끔한 디자인이 가능하다. 다른 것들은 다 간단한 건데, maintainBottomViewPadding은 뭐하는 건지 모르겠다. flutter.dev Reference SafeArea class - widgets library - Dart API A widget that insets its child by sufficient padding to avoid intrusions by the op..

윤태호가 선물하는 따뜻한 글씨 '미생체' 미생체는 저작권 걱정없이 영리/비영리적으로 자유롭게 사용하실 수 있습니다. webtoon.daum.net 웹툰 '미생'의 윤태호 작가님의 필기체로 만든 무료 폰트 위에 링크돼 있는 '다음 웹툰' 사이트에 가면 .ttf파일을 받을 수 있습니다... (티스토리에 직접 올릴려고 했는데, 10MB가 넘는다고 안올라 가네요... 용량을 확인해 보니 12.2MB입니다. 위 사이트에서 받아 주세요. ^^) 웹폰트로 사용할려면, .eot 파일이랑 .woff, .woff2 파일이 필요합니다. (브라우저 별로 쓰는게 달라서 그런데, .woff2 파일은 굳이 없어도 되지만 있으면 최신 브라우저에서 더 빠른 로딩이 가능합니다.) .ttf 파일을 받아서 변환 할 수도 있지만, 우리에게는..

flutter.dev Reference AlertDialog class - material library - Dart API A material design alert dialog. An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed be api.flutter.dev CupertinoAlertDialog class - cupertino library - Dart A..

#11 SilverAppBar #12 SilverList & SilverGrid #13 FadeInImage #14 StreamBuilder #15 InheritedModel #16 ClipRRect #17 Hero #18 CustomPaint #19 Tooltip #20 FittedBox #11 SilverAppBar #11 SilverAppBar #12 SilverList & SilverGrid #12 SilverList & SliverGrid #13 FadeInImage #13 FadeInImage #14 StreamBuilder #14 StreamBuilder #15 InheritedModel #15 InheritedModel #16 ClipRRect #16 ClipRRect #17 Hero #1..

#01 SafeArea #02 Expanded #03 Wrap #04 AnimatedContainer #05 Opacity #06 FutureBuilder #07 FadeTransition #08 FloatingActionButton (FAB) #09 PageView #10 Table #01 SafeArea #01 SafeArea #02 Expanded #02 Expanded #03 Wrap #03 Wrap #04 AnimatedContainer #04 AnimatedContainer #05 Opacity #05 Opacity #06 FutureBuilder #06 FutureBuilder #07 FadeTrasnition #07 FadeTransition #08 FloatingActionButton (..

|| Widget 소개 Flutter에는 기본적으로 CupertinoSegmentedControl과 CupertinoSlidingSegmentedControl 두 가지 위젯이 있다. 보통 Material과 Cupertino는 디자인만 다르고 비슷한 위젯이 있는데, SegmentedControl은 Cupertino에만 있는거 같다. Material 쪽을 찾아 봤지만 찾을 수가 없다. 일단, 뭐하는 녀석들인지 알아보기 위해 Example을 만들어 본다..... 그냥 어떤 녀석들인지 간단히 보기 위해서 대충 만든 예제 이므로, 이 상태에서는 터치를 해도 선택이 안된다. cf 1) CupertinoSegmentedControl의 경우 기본적으로 padding 값이 들어있기 때문에, 따로 지정해 주지 않으면 레이..