꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 기본적인 ListView 사용법에 대해서 알아봤다. 대부분의 리스트뷰는 수직적으로 구성하여 상하 스크롤되는 형태로 사용된다. 하지만 간혹 수평적으로 즉 좌우로 스크롤되는 리스트뷰가 필요할 때도 있다. 이 경우에는 ListView의 scrollDirection 항목의 설정을 통해 스크롤 방향을 변경할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext contex..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 ListView를 사용하는 방법에 대해서 알아본다. Flutter에서의 ListView는 ListTile들로 구성된다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Basic List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar(title: Te..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 Image와 FadeInImage 위젯을 통해 온라인상의 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 이 위젯들을 이용하면 스크린을 출력할 때 마다 매번 온라인상에서 이미지를 다운로드하여 화면에 출력하게된다. 만약 한번 다운로드한 이미지를 캐시로 관리하면서 재활용할 수 있다면 매번 다운로드하는 비용을 절감할 수 있고, 오프라인 상태에서도 이미지를 출력할 수 있는 장점이 있다. 이러한 기능은 CachedNetworkImage 위젯이 제공한다. CachedNetworkImage 이미지는 외부 패키지에서 제공하는 위젯이므로 pubspec.yaml 파일의 dependencies 항목에 패키지를 ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 Image.network() 위젯을 이용해서 온라인 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 온라인상에서 이미지를 다운로드를 할 때 일정시간이 소요되고 이 시간동안 스크린에는 아무것도 출력되지 않는다. 이는 UX 적으로 적절하지 못하다. 해결방법으로는 이미지가 준비되어 출력될 때 까지 이미지를 대신할 뭔가를 사용자에게 보여서 앱이 바쁘게 준비중임을 알리면 된다. 우선 실행화면을 살펴보자. 이미지가 출력되기 전에 둥그란 모양의 프로그레스 인디케이터를 출력하여, 조만간 뭔가가 출력될 것이라는 것을 사용자에게 알릴 수 있다. 또한 페이드인(Fade-in) 효과로 이미지가 서서히 나타나는 효..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 인터넷상의 이미지를 스크린에 출력하는 방법에 대해서 알아본다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { var title = 'Web Images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar(title: Text(title)), body: Column( children..

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