꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 리스트뷰에는 복수게의 리스트타일들이 등록되어 사용자에게 출력된다. 때에 따라서는 사용자가 일부 리스트타일을 삭제하기도 하는데 보통 리스트뷰내부의 특정 리스트타일을 손가락으로 밀어 Swipe 시킨다. 왼쪽 혹은 오른쪽으로 미는 행위를 Swipe라 하며, 이 때 호출되는 콜백이 onDismiss 함수다. 우선 실행화면을 살펴보자 리스트뷰의 리스트타일 중 첫번째 리스트타일을 오른쪽으로 밀어 삭제하고, 삭제와 동시에 첫번째 아이템이 삭제되었다는 스낵바가 출력되는 앱이다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); c..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서 InkWell 위젯에 대해 알아봤다. 제스쳐 기능을 제공하지 않는 위젯(컨테이너 등)을 InkWell 위젯으로 감싸면 onTap() 등의 기능을 이용할 수 있다. 추가로 InkWell 위젯을 탭하면 애니메이션 효과가 발생한다. 이와 유사하게 제스쳐 기능을 제공하지 않는 위젯에 제스쳐 기능을 제공하는 래핑 위젯으로 제스쳐디텍터(GestureDetector)가 있다. 사용방법도 거의 유사하다. 우선 소스코드를 살펴보자. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidge..

Flutter 강좌 목록 : https://here4you.tistory.com/120 컨테이너와 같이 별도의 제스쳐 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가하고자 할 때 InkWell 위젯을 이용할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = "InkWell Demo"; return MaterialApp(title: title, home: MyHomePage(title: title)); } } class..

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