꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서 폼과 텍스트폼필드의 사용법에 대해서 살펴보았다. 이번에는 텍스트필드에 스타일을 적용하는 방법에 대해서 알아본다. Flutter에서는 사용자로부터 텍스트의 입력을 받기 위해 TextField와 TextFormField를 제공한다. 이 두 텍스트 필드는 거의 유사한데 TextFormField 의 경우 폼 안에 넣어 사용하면서 추가적으로 입력값을 유효성 검증이나 다른 폼필드와의 연동 등의 기능을 제공한다. 지난 강좌에서 이용한 소스코드를 활용해서 다음과 같이 수정한다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class M..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 폼(Form)을 작성하는 방법과 폼 필드의 적감성을 검증하는 방법에 대해서 알아본다. Flutter에서 폼을 만들고 폼필드를 검증하는 방법은 다음과 같다. GlobalKey를 가지는 폼 생성 폼에 검증 로직을 가지는 폼필드 추가 폼의 데이터를 전송하는 버튼 추가 우선 실행화면을 살펴보자. 앱은 사용자로부터 텍스트를 입력받는 TextFormField를 가지고 있고, 그 하단에는 Submit 버튼이 존재한다. 사용자가 Submit 버튼을 클릭할 때 TextFormField의 상태를 검증해서 만약 아무런 텍스트가 입력되지 않았을 경우 에러 메시지를 출력하고, 텍스트가 입력된 경우 스낵바를 통해 'Proces..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 탭으로 화면을 구성하는 방법에 대해 알아본다. 탭을 사용하는 절차는 다음과 같다. TabController 생성 TabBar에 Tab 추가 TabBarView에 각 Tab에 해당하는 컨텐트 구성 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(TabBarDemo()); class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( /** * Tab 사용법 * 스크린을 TabContro..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 커스텀 폰트를 사용하는 방법에 대해 알아본다. 1. 폰트 파일 준비 앱에서 사용할 폰트를 준비해야 하는데 본 강좌에서는 Google Fonts 에서 Raleway 폰트와 RobotoMono 폰트를 사용한다. 구글 폰츠에서 해당 폰트를 다운로드하여 압축을 해제한다. 프로젝트의 루트 경로에 fonts 디렉토리를 생성 한 후 사용할 폰트들을 복사한다. 2. pubspac에 폰트 등록 pubspec.yaml 파일에 사용할 폰트파일을 기술하여 앱에서 폰트를 사용할 수 있도록 한다. (line 59 ~ line 69) name: use_custom_font description: A new Flutter appl..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 기본적인 테마(Theme)에 사용법에 대해서 알아본다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final appName = 'Custom Themes'; return MaterialApp( title: appName, // 테마 설정 theme: ThemeData( ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 스낵바의 사용법에 대해서 알아본다. 안드로이드에 토스트 메시지가 있다면 Flutter에는 스낵바 위젯이 있다. 스낵바의 모습은 다음과 같다. 화면 중앙의 RaisedButton을 누르면 화면 하단에 얇은 바(Bar)가 나타나면서 메시지가 출력된다. 추가로 아래 화면에서는 스낵바 우측에 Undo라는 텍스트가 존재하는데 이는 사용자가 누르게 되면 추가적인 액션을 발생하도록 할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(SnackBarDemo()); class SnackBarDemo extends Stat..

강좌 목록 2019/06/04 - [Development/Flutter] - Flutter 강좌 - Hello World 만들기 2019/06/10 - [Development/Flutter] - Flutter 강좌 - Basic widgets | 기본 위젯 2019/06/10 - [Development/Flutter] - Flutter 강좌 - Using Material Components | Scaffold 컴포넌트 사용법 2019/06/10 - [Development/Flutter] - Flutter 강좌 - Layout Tutorial | 레이아웃 구성 2019/06/24 - [Development/Flutter] - Flutter 강좌 - Statefull widget | 상호작용 기능 2019/..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 AnimatedContainer를 이용하여 애니메이션 효과를 주는 방법에 대해서 알아본다. 일반적으로 컨테이너는 위젯을 담을 수 있는 그릇이라고 할 수 있다. AnimatedContainer의 경우 컨테이너의 높이, 너비, 배경색, 테투리 등의 속성값을 조정하여 애니메이션 효과를 줄 수 있다. 우선 동작 화면부터 살펴보자. 화면 하단에 floatingActionButton을 클릭할 때마다 화면 중앙에 도형의 너비, 높이, 색상, 외각선 모양이 랜덤하게 변경되는 것을 확인할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; import 'dart:..