꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 텍스트필드의 값의 변화를 감지하고 핸들링하는 방법에 대해 알아봤다. 이번 강좌에서는 텍스트필드에 입력된 값을 얻어 그 값을 다이얼로그로 출력하는 방법에 대해 알아본다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp(title: '..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 텍스트필드에 입력된 값의 변화를 감지하고 핸들링하는 방법에 대해서 알아본다. 텍스트필드에 입력된 텍스트의 변화를 감지하고 핸들링하는 방법은 다음과 같이 두 가지다. 1. 텍스트필드에 onChange 항목을 구현 2. TextEditingController의 인스턴스에 핸들링 함수를 리스너로 등록 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ret..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서 텍스트필드의 사용법에 대해 알아보았다. 만약 한 화면에 여러 텍스트필드가 존재하고 사용자가 모든 텍스트필드에 텍스트를 입력하고자 한다면 일반적으로는 모든 텍스트 필드를 눌러서 포커싱이 되면 텍슽 입력이 가능하다. 본 강좌에서는 텍스트필드에 포커스를 전달하는 방법에 대해서 알아본다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mater..

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( ..