티스토리

Foggy day

검색하기

블로그 홈

Foggy day

jinhan38.com/m

jinhan38 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Flutter] AnimatedCrossFade widget 이번 포스팅에서는 AnimatedCrossFade 위젯에 대해 알아보겠습니다. AnimatedCrossFade는 두 위젯을 애니메이션 사용해서 바꿀 수 있도록 도와줍니다. 컬러나 텍스트 뿐만 아니라 사이즈 변경까지도 자동으로 애니메이션을 적용시킬 수 있기 때문에 매우 유용한 위젯입니다. 최종 동영상 first와 second 위젯을 지정해준 후에 crossFadeState 값에 어떤 위젯을 보여줄지 결정해주면 됩니다. 아래 예제에서는 first라는 변수로 구분해주고 있습니다. 간단하게 사용할 수 있으니 부가적인 설명은 생략했습니다. class Home extends StatefulWidget { const Home({super.key}); @override State createState.. 공감수 0 댓글수 0 2024. 5. 8.
[Flutter] showModalBottomSheet(바텀시트) - 사용법 이번 포스팅에서는 showModalBottomSheet에 대해 알아보겠습니다. showModalBottomSheet는 팝업과 유사하지만 아래에서 위로 올라오는 형태의 팝업입니다. 1. 바텀시트 호출 2. 바텀시트의 특성들 3. 바텀시트와 Future 4. 바텀시트의 AnimationController 최종 동영상 1. 바텀시트 호출 먼저 바텀시트를 호출하는 방법부터 알아보겠습니다. 바텀시트를 호출하기 위해서는 showModalBottomSheet 함수를 사용해야 합니다. 기본적으로 context와 WidgetBuilder를 전달해야 합니다. showModalBottomSheet( context: context, builder: (context) { return Container( color: Colors.. 공감수 3 댓글수 0 2023. 4. 2.
[Flutter] Navigator(화면이동) - 사용법(2부) 이번 포스팅은 Navigator 사용법 1부에 이은 2부입니다. 1부를 안 보신 분은 확인해 주시기 바랍니다. https://jinhan38.tistory.com/147 [Flutter] Navigator- 사용법(1부) 이번 포스팅은 Flutter Navigator의 사용법에 대해 알아보겠습니다. Flutter에서 화면을 이동하는 방법은 개발자마다 다른 것 같습니다. Flutter에서 제공하는 기본적인 Navigator로만 사용하는 경우가 있 jinhan38.com 1부에서는 Navigator와 MaterialPageRoute를 사용하면서 페이지를 이동했습니다. 이번에는 사전에 경로를 지정해 놓고, 해당 경로를 입력해서 화면을 이동하는 함수를 알아보겠습니다. 1. MaterialApp 설정 2. pus.. 공감수 2 댓글수 0 2023. 4. 1.
[Flutter] Navigator(화면이동) - 사용법(1부) 이번 포스팅은 Flutter Navigator의 사용법에 대해 알아보겠습니다. Flutter에서 화면을 이동하는 방법은 개발자마다 다른 것 같습니다. Flutter에서 제공하는 기본적인 Navigator로만 사용하는 경우가 있고, Getx나 go_router를 사용하는 분들도 있습니다. 이번에는 Dart에서 제공하는 기본적인 방법을 배워보고 추후에 기회가 되면 다른 방법도 알아보겠습니다. Navigator사용법에 대한 설명은 길어질 것 같아서 1, 2부로 나눴습니다. Navigator를 상세하게 다루기엔 범위가 넓고, 코드 파악에만 많은 시간을 투자해야 합니다. 때문에 간단한 개념과 사용법을 위주로 다루겠습니다. 1. Route와 Navigator 2. push, pop 3. pushReplacement.. 공감수 2 댓글수 0 2023. 3. 31.
[Flutter] FloatingActionButton - 사용법 이번 포스팅에서는 FloatingActionButton에 대해 알아보겠습니다. FloatingActionButton은 Scaffold 위젯과 함께 사용합니다. 화면에 floating 한(떠있는) 버튼을 만들고, 이 버튼을 특정 위치에 배치할 수 있습니다. 그리고 화면을 전환할 때 hero애니메이션을 추가할 수 있어서 다이내믹한 효과를 줄 수 있습니다. 1. 기본 사용법 2. 디자인 변경 3. hero 애니메이션 1. 기본 사용법 FloatingActionButton을 사용하기 위해서는 Scaffold위젯이 필요합니다. Scaffold 위젯의 floatingActionButton 특성에 FloatingActionButton 위젯을 넘겨주기만 하면 됩니다. 아래 코드를 입력한다면 우측 이미지 처럼 화면 오른.. 공감수 0 댓글수 0 2023. 3. 28.
[Flutter] BottomNavigationBar Widget - 사용법 이번 포스팅에서는 BottomnavigationBar에 대하여 알아보겠습니다. 많은 앱들에서 하단의 버튼을 사용해 페이지를 전환하는 UI를 사용하고 있습니다. 자주 사용되는 기능이기 때문에 Scaffold위젯과 BottomNavigationBar를 사용하면 손쉽게 해당 UI를 구현할 수 있게 구성돼 있습니다. 1. 기본 사용법 2. currentIndex, onTap 3. showSelectedLabels, showUnselectedLabels 4. 기타 특성들 1. 기본 사용법 우선 Scaffold위젯의 bottomNavigationBar 특성에 BottomNavigationBar 위젯을 넘겨줘야 합니다. BottomNavigationBar 위젯에는 BottomNavigationBarItem 클래스를 .. 공감수 1 댓글수 0 2023. 3. 27.
[Flutter] Scaffold Widget - 사용법 이번 포스팅에서는 Scaffold 위젯에 대해 알아보겠습니다. Scaffold 위젯은 대부분의 화면에서 가장 상위 레벨에서 사용하는 위젯입니다. 사실 Scaffold 위젯은 MaterialApp의 탑 레벨 위젯으로 사용되기 위해 고안된 위젯입니다. Scaffold 위젯이 가지고 있는 기능들을 한 페이지에서 모두 다루기는 어려울 것 같습니다. 때문에 AppBar, BottomNavigationBar, FloatingActionButton, Drawer는 다른 글에서 상세히 다루겠습니다. https://jinhan38.tistory.com/126 [Flutter] AppBar 사용법 이번 포스팅에서는 AppBar의 사용법을 알아보겠습니다. AppBar는 대부분 Scaffold위젯과 함께 사용됩니다. 새로운 .. 공감수 0 댓글수 0 2023. 3. 27.
[Flutter] DefaultTabController, TabBar, TabBarView Widget - 사용법 이번 포스팅에서는 DefaultTabController, TabBar, TabBarView에 대해 알아보겠습니다. TabBar는 따로 상세히 다룬 페이지가 있으니 확인해 주시기 바랍니다. DefaultTabController, TabBar, TabBarView는 좌우 스와이프가 가능한 탭 페이지 형식의 UI를 만들어줍니다. 아래 영상으로 먼저 어떤 형태인지 확인해보겠습니다. 많은 앱들에서 볼 수 있는 구조입니다. 중요한 것은 TabBar와 하위 페이지들을 어떻게 연결시킬건가 입니다. 그런데 DefaultTabController와 TabBarView를 사용하면 손쉽게 연결할 수 있습니다. TabBarView는 PageView와 동일한 기능을 하지만 TabBar와 연결이 수월합니다. TabBar와 PageV.. 공감수 0 댓글수 0 2023. 3. 27.
[Flutter] PageView Widget - 사용법 이번 포스팅에서는 PageView Widget에 대해 알아보겠습니다. PageView는 페이지를 좌우나 상하로 애니메이션 전환할 수 있는 위젯입니다. 대부분의 앱에서 사용하는 기능입니다. 1. 기본 사용법 2. 스크롤 방향 전환(scrollDirection) 3. 기타 특성 4. PageController 정보 확인 5. PageController 페이지 이동 1. 기본 사용법 기본적인 사용법은 간단합니다. PageView를 생성하고 children으로 사용할 위젯들을 넣어주기만 하면 됩니다. 그러면 좌우로 스와이프 해서 화면을 변경할 수 있는 PageView가 됩니다. import 'package:flutter/material.dart'; class PageViewScreen extends Statef.. 공감수 0 댓글수 0 2023. 3. 27.
[Flutter] TabBar Widget - 사용법 이번 포스팅에서는 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.. 공감수 3 댓글수 4 2023. 3. 26.
[Flutter] Button Widget - 예제(ElevatedButton, TextButton, OutlinedButton, IconButton) 이번 포스팅에서는 Button 위젯의 예제를 만들어봤습니다. Flutter에서 클릭에 대한 액션은 GestureDetector, InkWell, Button을 사용해 구현합니다. Button 위젯들에는 기본적으로 설정된 UI가 있어서 간단히 구현하기에는 GestureDetector와 InkWell이 더 편리합니다. 하지만 클릭 이벤트를 좀 더 다이내믹하게 구현하고 싶다면 Button 위젯들을 사용하는 것도 좋은 방법입니다. ElevatedButton, TextButton, OutlinedButton 버튼은 동일한 방법으로 style을 설정할 수 있습니다. 그래서 셋 중 한개의 버튼을 선택해서 스타일을 입혀 사용하고 있습니다(개발자마다 다름). IconButton은 다른 특성들이 있기 때문에 따로 구현했습.. 공감수 0 댓글수 0 2023. 3. 26.
[Flutter] Stack Widget - 사용법 이번 포스팅에서는 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에 따라서 자식 위치가 결정됩니다. 기본값은 왼쪽에서 오른쪽 환경의 경우 왼쪽 상단 모서리이고, 오른쪽에서 왼쪽 환경의 경우 오른쪽 상.. 공감수 1 댓글수 0 2023. 3. 26.
[Flutter] How Flutter renders Widgets? - Flutter가 위젯을 그리는 방법 이번 포스팅에서는 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는 개발자가 사용하.. 공감수 1 댓글수 0 2023. 3. 24.
[Flutter] GridView - 사용법 이번 포스팅에서는 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.. 공감수 2 댓글수 0 2023. 3. 24.
[Flutter] ListView - 사용법 이번 포스팅에서는 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().. 공감수 2 댓글수 2 2023. 3. 23.
[Flutter] SingleChildScrollView - 사용법 이번 포스팅에서는 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는 최.. 공감수 3 댓글수 0 2023. 3. 22.
[Flutter] Image Widget - 사용법 이번 포스팅에서는 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 : 이미지가 .. 공감수 1 댓글수 0 2023. 3. 22.
[Flutter] Text Widget - 사용법 Text Widget을 살펴보니 자주 사용하지는 않지만 잘 활용하면 도움이 될만한 특성들이 많았습니다. 그래서 이번 포스팅에서는 Text 위젯에 대해 상세히 알아보겠습니다. 그림으로 이해하는 것이 필요한 특성들은 이미지와 함께 따로 설명하고 있으며, 그 외의 특성들은 코드에 주석으로 달아놨습니다. 1. TextStyle 여러 가지 텍스트 스타일을 적용해 봤습니다. 자세히 설명하지는 않고, 코드와 주석으로 대체하겠습니다. full code는 페이지 하단에 있습니다. TextStyle( fontSize: 20, height: 2, color: Colors.green, fontWeight: FontWeight.bold, backgroundColor: Colors.orange.shade50, /// 자간 let.. 공감수 4 댓글수 0 2023. 3. 21.
[Flutter] PopupMenuButton - 사용법 PopupMenuButton은 버튼을 클릭했을 때 팝업으로 여러 항목들을 보여줄 수 있는 위젯입니다. 위젯의 사용법이 약간 까다롭고, 디테일한 UI를 수정하는 부분에서 어려움이 있었습니다. 그래서 각각의 특성들을 한 번 자세히 알아보겠습니다. 특성들에 대한 설명은 주석으로 상세히 달아놓았고, 아이템을 클릭할 때 splashColor설정이 안 돼서 Theme위젯을 사용했습니다. Full code import 'package:flutter/material.dart'; class PopupMenuButtonScreen extends StatefulWidget { const PopupMenuButtonScreen({Key? key}) : super(key: key); @override State createS.. 공감수 3 댓글수 0 2023. 3. 21.
[Flutter] Row - 사용법 Row위젯은 가장 많이 사용하는 위젯 중 하나로 위젯들을 가로로 배치시키고 싶을 때 사용합니다. 처음에는 사용법이 헷갈릴 수도 있지만 몇 개의 특성들만 이해한다면 손쉽게 사용할 수 있습니다. Row는 Column 위젯과 형태가 흡사합니다. 단지 기준 축이 가로라는 것이 다릅니다. 그래서 MainAxisAlignment와 CrossAxisAlignment만 잘 이해해도 수월하게 사용할 수 있습니다. MainAxisAlignment MainAxisAlignment는 가로 축으로 자식 위젯들을 어떻게 배치할지를 결정합니다. MainAxisAlignment에는 6가지 타입이 있습니다. 각 타입별로 자식 위젯들이 어떻게 배치되는지 그림으로 표현해 뒀습니다. Row( mainAxisAlignment: MainAxi.. 공감수 1 댓글수 0 2023. 3. 20.
[Flutter] Column - 사용법 Flutter에서 가장 많이 사용하는 위젯 중 하나인 Column 위젯에 대해 알아보겠습니다. Column은 자식 위젯들을 세로로 배치시킬 수 있는 LayoutWidget입니다. 1. 기본 red, blue 컬러의 컨테이너 두개를 Column의 자식 위젯으로 입력했습니다. 아무 특성을 주지 않았기 때문에 Column의 최상단에 자식 위젯들이 순서대로 그려졌습니다. Column( children: [ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 100, height: 100, color: Colors.blue, ), ], ); 2. MainAxisAlignment 이번에는 green 컨테이너를 추가하고, 컨테이너들을.. 공감수 1 댓글수 0 2023. 3. 19.
[Flutter] AppBar 사용법 이번 포스팅에서는 AppBar의 사용법을 알아보겠습니다. AppBar는 대부분 Scaffold위젯과 함께 사용됩니다. 새로운 페이지로 이동할 때 뒤로가기 버튼과 페이지 이름, 필요하다면 추가적인 버튼들을 추가해서 사용합니다. 앱바에는 이 외에도 몇 가지 특성들이 더 있습니다. 그래서 자주 사용하는 특성들과 자주 사용하지 않는 특성들을 함께 살펴보겠습니다. 우선적으로 알아야 할 것은 leading, title, action 위젯들입니다. leading은 앱바의 왼쪽, title은 앱바의 가운데, action은 앱바의 오른쪽에 위치하는 위젯들입니다. 이때 leading위젯을 선언하지 않거나 null을 입력하면 뒤로가기 버튼이 기본적으로 생성되는데 automaticallyImplyLeading특성을 사용하면 .. 공감수 1 댓글수 0 2023. 3. 17.
[Flutter] Container widget 사용법 Container는 Flutter에서 가장 많이 사용하는 위젯 중 하나입니다. 대부분 사이즈와 간격 조절을 위한 layoutWidget으로 많이 사용하는데 이번 포스팅에서는 Container가 가지고 있는 다양한 속성들을 활용해보겠습니다. width, height, margin, padding, constraints 특성은 많이 사용되고 있으니 설명은 생략하겠습니다. 자세히 주목할 부분은 decoration과 foregroundDecoration 특성입니다. 예제에서 decoration 특성에는 그라데이션(gradient)을 넣었고, foregroundDecoration 특성에는 그림자 효과(shadow)를 주었습니다. decoration decoration은 자식 위젯의 뒤에 그려지는 특성입니다. Bo.. 공감수 1 댓글수 0 2023. 3. 15.
[Flutter] 기본 Dialog 사용법 이번 포스팅에서는 Flutter에서 사용되는 기본 Dialog에 대해 알아보겠습니다. Dialog의 속성에는 여러가지가 있습니다. 배경색, 배경 터치여부, 키보드가 올라왔을 때 영역/애니메이션 설정 등. 이러한 속성들을 알아보고, 각 속성들이 어떤 역할을 하고 있는지 알아보겠습니다. 대부분의 설명은 예제에 주석으로 추가했지만 Dialog에서 잘 안쓰이는 특성들 몇 가지만 추가적으로 설명하겠습니다. alignment : 다이얼로그의 위치를 설정해줍니다. 예제에서는 bottomCenter로 주었기 때문에 화면 하단에 노출됩니다. insetAnimationDuration, insetAnimationCurve : 화면에 키보드가 올라왔을 때 동작하는 특성들입니다. 키보드가 올라오면서 화면이 줄어들기 때문에 다이.. 공감수 1 댓글수 0 2023. 3. 14.
[Flutter] ListTile Widget 사용법 ListTile을 사용하면 간단한 위젯을 만들 때는 편했지만 디테일한 UI를 구성할 때는 불편해서 잘 사용하지 않았었습니다. 주로 padding문제 때문이었는데, 이 기회에 어떤 특성들이 padding을 갖고 있는지 체크해봤습니다. 1. ListTile은 기본적으로 좌우 패딩이 들어가 있습니다. 그래서 원하는 패딩 값을 넣기 위해서는 contentPadding 특성에 EdgeInsets 형태의 값을 넣어줘야 합니다. 2. 세로 또한 기본 패딩 값이 들어가있는데 변경하려면 minVerticalPadding 특성에 double 값을 넣어주면 됩니다. 3. 그리고 ListTile에는 leading, tile, trailing 3개의 위젯이 들어갑니다. 이 3개의 위젯 사이에도 기본적인 간격이 들어가 있는데 간.. 공감수 1 댓글수 0 2023. 3. 11.
[Flutter] Checkbox Widget 사용법 Checkbox Widget은 많이 사용되지만 위젯의 크기와 모양, 컬러를 변경하는 부분에서 헷깔릴 때가 많습니다. 그래서 자주 사용되는 기능들을 사용해서 정리해봤습니다. 특히 설정하기 어려웠었던 부분은 체크박스의 기본 패딩 제거와 사이즈 변경이었습니다. 체크박스는 기본적인 사이즈와 패딩을 가지고 있는데 패딩을 제거하기 위해서는 materialTapTargetSize 특성에 MaterialTapTargetSize.shrinkWrap를 입력하면 됩니다. 그리고 크기를 변경하기 위해서는 Transform.scale 위젯을 사용할 수 있습니다. /// 체크박스의 사이즈조절을 하려면 scale 사용 필요 /// ex) scale 1.2 => 크기 1.2배 Transform.scale( scale: 1.2, ch.. 공감수 0 댓글수 0 2023. 3. 11.
[Flutter] TextFormField - 실전 사용법(validation 체크) TextFormField Flutter에서 사용자의 입력을 받을 때 TextFormField이나 TextField 위젯을 많이 사용합니다. 이번 포스팅에서는 TextFormField 위젯을 사용해서 validation체크와 에러 문구를 띄워주는 작업을 해보겠습니다. TextFormField 위젯을 사용할 때 불편했던 점은 decoration특성이었습니다. 어떤 특성들을 입력해야 내가 원하는 decoration설정이 되는지 찾아보는 것 부터 많은 시간이 필요했습니다. 아래 예제에서는 4가지의 border 특성을 주었습니다. 1. TextFormField 선택 안 했을 때(enableBorder) 2. TextFormField 선택 했을 때(focusedBorder, 3, 4번이 2번 Border보다 우선순.. 공감수 0 댓글수 0 2023. 3. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.