Clein's Tistory

Widget of the Week #7 FadeTransition flutter.dev Reference FadeTransition class - widgets library - Dart API Animates the opacity of a widget. For a widget that automatically animates between the sizes of two children, fading between them, see AnimatedCrossFade. Here's an illustration of the FadeTransition widget, with it's opacity animated by a CurvedAnimation s api.flutter.dev

Widget of the Week #6 FutureBuilder flutter.dev Reference FutureBuilder class - widgets library - Dart API Widget that builds itself based on the latest snapshot of interaction with a Future. The future must have been obtained earlier, e.g. during State.initState, State.didUpdateConfig, or State.didChangeDependencies. It must not be created during the State.bui api.flutter.dev

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..

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 (..