본문 바로가기

SW 개발/FrontEnd(Flutter)9

Flutter TextField 와 TextFormField 스타일 꾸미기 (Sample code) Flutter에서 TextField와 TextFormField 필드에서 Style을 추가하는 방법입니다. 공식 문서는 Create and style a text field에 설명되어 있습니다. TextFormField는 TextField을 Form으로 감싼 것이기 때문에 사용법은 동일합니다. Flutter 버전에 따라서 문법이 변경될 수 있기 때문에 버전에 맞는 문법을 사용해주세요. 본 포스팅과 함께 Form의 Validation 사용법도 참고하세요. Flutter 사용자 입력 값 검증 위한 Form validation과 TextFormField (Sample code) TextField와 TextFormField에 아이콘 추가, Label text, HInt Text 추가 TextField 또는 Tex.. 2022. 1. 2.
Flutter 사용자 입력 값 검증 위한 Form validation과 TextFormField (Sample code) Flutter에서 사용자 입력을 받기 위한 Widget은 TextField와 TextFormField가 2가지 Class가 있습니다. TextField은 사용자 입력을 받고, Widget의 GUI를 설정할 수 있는 Widget이고, TextFormField는 TextField 기능을 포함하여 다수의 입력을 받을 때 편리하게 사용하는 Form기능(예를 들어, validation 기능)을 추가한 wraper class입니다. Form 예제로는 아래 그림과 같이 로그인을 위한 ID, Password 입력, User 정보 생성을 위한 사용자 입력 UI를 예로 들 수 있습니다. 사용자 입력을 위한 Flutter Widget TextFiled: 사용자 입력받기 위한 Widget Class TextFormField .. 2022. 1. 2.
Flutter 이미지 처리를 위한 Image, FadeInImage, CachedNetworkImage, ExtendedImage 사용법 및 성능 비교 지난 포스팅에서는 Material UI와 Cupertino Icon을 사용하는 방법을 정리하였습니다. 이번 포스팅에서는 GUI 처리에서 필수적인 Image 처리 방법에 대해서 설명하도록 하겠습니다. Image 처리 API는 1) App 리소스에 이미지 포함 여부, 2) Placeholder 지원 여부, 3) Cache 기능 지원 여부, 4) 이미지 Display 속도를 기준으로 대락 5가지 정도의 API를 사용할 수 있습니다. 모든 이미지를 App에 assets 형태로 리소스에 포함시킨다면 Image로딩 속도는 빠르나, App의 크기 자체도 커지고 Image 변경 시 App 자체를 변경 후 다시 배포해야 합니다. Internet 이미지는 App Asset 이미지와 반대의 경우로 리소스 서버 또는 인터넷에.. 2022. 1. 1.
Flutter에서 Material UI Icon과 Cupertino Icon 검색하고 사용하기 Flutter로 App을 개발할 때 무료로 배포된 아이콘을 사용하는 경우가 많습니다. 물론 개발팀에 GUI 디자이너가 있다면 이쁜 아이콘을 만들 수 있지만, App Bar나 Menu 에서는 다른 App과 일관성을 가지기 위해서 필요한 아이콘을 찾아 적용하는 경우도 많습니다. Flutter에서 사용할 수 있는 아이콘은 대표적으로 Google에서 만든 Materal UI와 Apple App 스타일의 Cupetino 아이콘이 있습니다. 본 포스팅은 Material UI와 Cupertino Icon에서 적용하고자 하는 아이콘을 검색하고 사용하는 방법을 설명합니다. Flutter에서 많이 사용하는 아이콘: Material UI Icon: Google Style Icons Cuppertino Icon: Apple .. 2021. 12. 30.
Flutter에서 Widget Tree와 layout 디자인 방법 Flutter에서 Widget은 Text, Icon, Image, Button, List, ListView와 같은 UI Component를 구성하는 Class입니다. Flutter App은 Widget과 Layout을 조합하여 Widget Tree를 구성하고 최종적으로 UI를 표시합니다. Flutter에서는 상당히 많은 Widget을 지원하기 때문에 모두 외울 필요는 없고, 자주 사용하는 Widget 정도의 내용만 확인하고 필요에 따라서 공식 문서에서 찾아서 사용하는 것을 추천드립니다. Widget 구성 Tutorial 은 링크를 확인해주세요. Widget Tree Flutter에서 Widget Tree는 React의 component tree 또는 Html DOM tree와 같은 개념으로 UI Comp.. 2021. 12. 29.
Flutter Parent-Child Widget간 State 전달과 업데이트 방법 Flutter Widget 간 State 전달 방법과 업데이트 방법을 정리합니다. Flutter에서는 React Props와 State 관리 방식과 유사한 방식을 사용하고 있습니다. Flutter에서는 크게 2가지 방법으로 분류할 수 있습니다. 부모 Widget에서 자식 Widget으로 State 전달 자식 Widget에서 부모 Widget의 callback함수를 통해서 State update 부모 Widget에서 자식 Widget으로 State 전달 부모 Widget에서 자식 Widget으로 state 전달하는 방법은 다음과 같은 3단계로 진행합니다. 부모 Widget에서 자식 Widget으로 State 보내기 자식 Widget에서 전달받을 state를 class member 변수로 등록하기 자식 Wi.. 2021. 12. 29.
Flutter Stateless와 Stateful Widget 개념과Life Cycle, 대표 Widget(MaterialApp, Scaffold) Widget의 종류: Stateless Widget vs Stateful widget Flutter를 사용하다 보면 화면에 무엇인가 표시하는 경우 모든 것을 Widget으로 처리합니다. Flutter의 Widget은 React의 Component DOM tree와 유사한 개념이며, 상태 관리에 따라서 상태 변경이 가능한 Stateful Widget과 상태 변경이 불가능한 Stateless Widget으로 구분할 수 있습니다. Statless widget: State 변경이 불 가능한 위젯, 화면을 Rendering 후 데이터의 변경이 없음, React Props와 유사 개념 Stateful widget: State 변경이 가능한 위젯, 화면을 Rendering 후 데이터에 의해서 Data를 표시행 하는.. 2021. 12. 28.
Android Studio와 Visual Code로 Flutter Project 프로젝트 생성 Flutter 개발 환경을 설정하고, 프로젝트를 생성하는 과정을 설명합니다. Flutter Project는 Android Studio (IntelliJ), Visual Code, Terminal CLI를 사용할 수 있습니다. 개인적으로 익숙한 IDE를 사용하면 됩니다. Android Studio가 다소 기능이 복잡하지만 다양한 기능을 사용할 수 있고, Visual Code는 다양한 Extention을 활용할 수 있어 코드 생산성이 높습니다. Android Studio (IntelliJ) Visual Code Terminal CLI(Command Line Interface) Android Studio에서 Flutter Project 생성하기 Android Studio에서는 Flutter Plugin을 반드.. 2021. 12. 28.
Flutter 특징과 개발환경 설정 방법 Flutter란 Flutter는 하나의 소스 코드로 Android, I-OS, Web, Chrome OS, Windows, Linux 등의 여러 플랫폼에서 동작 가능한 응용 프로그램을 개발할 수 있는 Cross Platform SDK입니다. Google이 2017년 발표하였으며, 최근까지도 Google 주도하에 활발하게 개발되고 있고, 3rd party lib도 다양하게 개발되고 있습니다. Flutter에서 사용하는 프래그램 언어는 Dart입니다. Dart는 Java Script 문법적으로 비슷하고, C/C++, C#, Python 등의 장점을 수용하였습니다. 기존에 프로그램 언어를 하나라도 알고 있다면 쉽게 사용이 가능합니다. Dart는 Web에서는 Html, CSS, Java script으로 Tran.. 2021. 12. 28.

티스토리툴바