본문 바로가기

Flutter

 (80)
[j Flutter] DropDownFormField (드롭박스) 구현하기 1. 먼저 DropDownFormField 패키지를 설치해준다. dropdown_formfield: ^0.1.3 pub.dev/packages/dropdown_formfield/install dropdown_formfield | Flutter Package A dropdown form field using a dropdown button inside a form field. pub.dev 2. 드롭박스에 넣을 임의의 데이터를 만들어준다. const List category_map = [ {"code": "1", "title": "1월"}, {"code": "2", "title": "2월"}, {"code": "3", "title": "3월"}, ]; 3. DropDownFormField 구현 String..
[j Flutter] CheckboxListTile (체크박스 리스트타일) CheckboxListTile을 구현해보자. 아래 flutter홈페이지에 자세히 나와있다. api.flutter.dev/flutter/material/CheckboxListTile-class.html CheckboxListTile class - material library - Dart API A ListTile with a Checkbox. In other words, a checkbox with a label. The entire list tile is interactive: tapping anywhere in the tile toggles the checkbox. The value, onChanged, activeColor and checkColor properties of this widget a..
[j Flutter] 캘린더 / 달력 추가하기 (calendar, datepicker) 캘린더를 추가해보자. 1. syncfunsion_flutter_datepicker 패키지를 pubspec.yaml에 추가해준다. syncfusion_flutter_datepicker: ^18.4.31-beta pub.dev/packages/syncfusion_flutter_datepicker syncfusion_flutter_datepicker | Flutter Package The Syncfusion Flutter Date Range Picker widget allows users to easily select dates or a range of dates. It has built-in views that allow quick navigation to the desired date. pub.dev 2...
[j Flutter] 계산기 입력 / 추가하기 (calculator) flutter에서는 계산기 관련 패키지를 추가해서 사용하면 쉽다. 1. input_calculator package pubspec.yaml에 추가 input_calculator: ^1.1.0+5 pub.dev/packages/input_calculator input_calculator | Flutter Package With Input Calculator you can add functionality of calculation in an TextField. pub.dev 2. 계산기 실행 double _value = 0.0; set value(double value) { setState(() { _value = value; }); } String valueFormat(double value) { retu..
[j Flutter] 날짜형식 포맷 / 두 날짜 차이구하기 / 현재날짜가져오기 해당 패키지를 import 해준다. import 'package:intl/intl.dart'; 1. 날짜 형식 포맷 String date = "20210101"; DateFormat('yyyy/MM/dd').format(DateTime.parse(date)).toString(); 해당 결과값으로 2021/01/01이 출력이 된다. yyyy : 년 , MM : 월 , dd : 일 , hh: 시 , mm : 분 , aaa : am/pm 2. 현재 날짜 가져오기 var _toDay = DateTime.now(); 3. 두 날짜 차이 구하기 var _toDay = DateTime.now(); String date = "20210101"; int difference = int.parse( _toDay.differ..
[j Flutter] 갤러리/앨범에서 사진가져오기 & 카메라 실행 갤러리에서 사진 가져오기 / 카메라 실행을 해보자. 둘 다 실행시킬 수 있는 공통 패키지를 설치해준다. 1. image_picker 패키지 pubspec.yaml 에 설치 dependencies: image_picker: ^0.6.7+17 pub.dev/packages/image_picker image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev 2. ImagePicker 사용 File Photo_file; void Photo(ImageSource source) async { File..
[j Flutter] 금액 콤마 / 숫자 3자리마다 (,) 표시 \10,000처럼 3자리마다 콤마(,)표시를 해보자. 1. intl 패키지를 pubspec.yaml에 설치한다. intl: ^0.16.1 pub.dev/packages/intl intl | Dart Package Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization issues. pub.dev 2. NumberFormat.format(String값)이여야한다. NumberFormat('###,###,###,###').format(price).replaceAll(' ', '')
[j Flutter] convex_bottom_bar 사용하기 앞서 bottom navigationbar를 만들어보았다. 2020/10/27 - [Flutter] - [j Flutter] BottomNavigationBar 바닥메뉴 / 네비게이션바 convex_bottom_bar를 사용하여 메뉴를 좀 더 애니메이션을 줘보자. 1. convex_bottom_bar 플러그인 설치 https://pub.dev/packages/convex_bottom_bar pubspec.yaml 안에 convex_bottom_bar 플러그인을 설치해준다. 2. Scaffold widget 안 bottomnavigationbar 부분에 해당코드를 작성해준다. ConvexAppBar( items: [ TabItem(icon: Icons.home, title: 'HOME'), TabItem(..

티스토리툴바