썸네일 Flutter 2.0 Button ( 버튼 ) 좀 늦은 감이 있지만, 스스로의 정리를 위해서 2.0에서 버튼을 정리해 봅니다. 1. TextButton 이전의 FlatButton과 동일합니다. 이름이 용도에 맞게 더 직관적으로 되었습니다. 테마또한 TextButtonTheme를 사용합니다. 2. ElevatedButton 이전의 RaisedButton과 동일합니다. ElevatedButtonTheme의 테마를 사용합니다. 3. OutlinedButton 이전의 OutlineButton과 동일합니다. OutlinedButtonTheme의 테마를 사용합니다. 2.0 버전으로 마이그레이션 ( migration )을 원하신다면 하기 링크를 참고하세요~ https://docs.flutter.dev/release/breaking-changes/buttons N..
썸네일 Flutter Bottom NavigationBar 앱 개발하면서 가장 많이 쓰는 Navigation Bar 입니다. Android, iOS와 비교하면 굉장히 쉽게 구현할 수 있습니다. Scaffold 내에 bottomNavigationBar : BottomNavigationBar() 를 하고 BottomNavigationBarItem을 넣어주면 끝!! import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'Flutter Code Sample'; @override Widget ..
썸네일 Grid Multi Selection ( 그리드 뷰 다수 선택 ) 그리드 뷰에서 2개 이상의 선택을 하고 싶을 때가 있습니다. 갤러리 앱을 실행하면 할 수 있는 다수 선택과 드래그 시 손을 놓기 전까지 모두 선택되는... 그런 작업을 도와주는 라이브러리를 소개 합니다. https://github.com/hcbpassos/drag_select_grid_view?ref=morioh.com&utm_source=morioh.com GitHub - hcbpassos/drag_select_grid_view: A grid that supports both dragging and tapping to select its items. A grid that supports both dragging and tapping to select its items. - GitHub - hcbpass..
썸네일 Progress Indicator ( 프로그래스바 ) 다양한 Progress indicator를 제공해주는 좋은 라이브러리를 소개 합니다. https://pub.dev/packages/step_progress_indicator step_progress_indicator | Flutter Package Bar indicator made of a series of selected and unselected steps pub.dev
썸네일 위젯 드래그 이동 특정 위젯을 드래그 하여 이동하고 싶을 때, 하기 코드를 참고하세요. return Positioned( top: y, left: x, child: GestureDetector( onPanUpdate: (info) { setState(() { x += info.delta.dx; y += info.delta.dy; }); }, child: Container( width: 100, height: 100, ), ), GestureDetector 의 onPanUpdate는 자식의 터치하여 움질일 때, 해당 좌표 값을 알려줍니다. 즉, onPanUpdate로 얻은 좌표 값을 Positioned에 적용하고 화면을 업데이트하면서 위젯이 이동하는 것으로 보여줄 수 있습니다.
썸네일 Flutter 드래그 ( draggable ) FAB ( Floating action button ) 드래그 가능한 Fab 라이브러리 2개를 소개합니다. 1. 화면 내에서 어떠한 위치든 드래그되는 FAB https://pub.dev/packages/draggable_fab draggable_fab | Flutter Package A Draggable FAB wrapper widget which can dragged to any edge of the screen. pub.dev 2. 화면 내에 어느정도 위치로 드래그하면 해당 위치의 사이드로 붙는 FAB https://pub.dev/packages/floatingpanel floatingpanel | Flutter Package Floating panel helps you create easy floating menu which you can drag an..
썸네일 다양한 사이즈 Grid Layout - flutter_staggered_grid_view 위와 같이 다양한 그리드 ( Grid ) 레이아웃을 쉽게 사용할 수 있는 라이브러리를 소개합니다. https://pub.dev/packages/flutter_staggered_grid_view flutter_staggered_grid_view | Flutter Package Provides a collection of Flutter grids layouts (staggered, masonry, quilted, woven, etc.). pub.dev
썸네일 Flutter IconButton 패딩 ( Padding ) 제거 IconButton을 사용하면 위와 같이 아이콘 외에 주변에 패딩이 들어가 있습니다. 48px의 사이즈로 둘러싸져 있는데, 이 부분을 제거하고 싶을 때가 있습니다. 조금 검색해보면 아래와 같이 padding: EdgeInsets.zero을 추가하면 된다고 하는데 되지 않는다.... IconButton(onPressed: (){}, icon: Icon(Icons.close, size: 12, ), padding: EdgeInsets.zero, ), padding: EdgeInsets.zero , constraints: BoxConstraints() 추가하면 된다. IconButton(onPressed: (){}, icon: Icon(Icons.close, size: 12, ), padding: EdgeIn..
썸네일 Flutter MainAxisSize min ? max ? Column, Row 를 사용함에 있어서 mainAxisSize 를 사용 함에 있어서 2가지 방법이 있습니다. Column( mainAxisSize: MainAxisSize.min, children: [ Text( Column( mainAxisSize: MainAxisSize.max, children: [ Text( 어렵지 않습니다. min은 하위 자식들의 모든 사이즈만을 더한 높이를 이야기 합니다. max는 하위 자식들만이 아닌 남은 공간까지 모두 포함한 총 높이를 이야기 합니다. 이 두가지를 잘 사용하시면 하위 자식의 중앙 정렬, 하단 정렬 등을 적용하실 때 헷갈리지 않으십니다.
썸네일 Flutter Deep ( Dynamic ) Link ( 딥 링크, 다이나믹 링크 ) Flutter에서 Deep Link를 사용하기 위해서는 하기의 uni_links 라이브러리를 사용 한다. https://pub.dev/packages/uni_links uni_links | Flutter Package Flutter plugin for accepting incoming links - App/Deep Links (Android), Universal Links and Custom URL schemes (iOS). pub.dev 기본 설정 1. Android ( AndroidMenifest.xml ) 2. iOS (Info.plist) CFBundleURLTypes CFBundleTypeRole Editor CFBundleURLName flutter.deeplink.sample CFBundle..
썸네일 Flutter onResume() , onPause() 있다? 안드로이드 개발자는 onResume(), onPause() 상태에서 꽤 많은 로직을 처리 합니다. 예를 들어 동일한 태스크 스택에서 다른 화면을 호출했다가 해당 화면이 사라졌을 때, 팝업(다이얼로그)이 떳다가 사라질 때, 전원 버튼을 눌렀서 화면을 껏다가 킬 때, 굉장히 많은 곳에서 onResume()과 onPause()는 사용 됩니다. 그래서 Flutter에서 같은 기능을 하는 라이프 사이클 함수가 있을 것 같습니다. 당연히. 하지만... 결론부터 말씀드리자면 동일한 기능을 가진 함수는 없습니다. 저 또한 많은 방식을 찾아봤는데 결국 상태 관리(bloc, provider, getx 등) 방법 또는 Navigator의 결과를 받는 방법 밖에 없습니다. 어떤 글에서는 WidgetsBindingObserve..
썸네일 Flutter 아이콘 ( Icon ) 만들기 Flutter는 기본적으로 많은 Icon을 제공합니다. (땡큐) 그러나 우리 또는 디자이너는 다른 아이콘을 사용하고 싶어하죠. 그럴 때는 이미지 버튼을? 전 아이콘을 만들어서 넣으시길 추천합니다. 한번 만들어 놓으면 사용하기도 쉽고 아무래도 리소스 그리고 애니메이션도 쉽게 만들수 있기 때문이죠. 아이콘 애니메이션은 하기 링크를 참고하세요. 2022.01.06 - [Flutter(플러터)/UI] - Flutter Animation icon Flutter Animation icon 위와 같이 아이콘에 애니메이션을 주고 싶습니다. Flutter에서는 아이콘에 애니메이션이 쉽게 적용될 수 있도록 AnimatedIcon 이라는 위젯을 제공 합니다. 아래 링크에서 확인 가능합니다. https://www.yo byo..