꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 플로팅 앱바를 만드는 법에 대해서 알아본다. 지난 강좌에서는 Scaffold의 AppBar 위젯을 통해서 앱바를 구현했다. Scaffold의 appBar의 경우 화면상단에 고정 크기로 배치되어 항상 영역을 차지하게 된다. 만약 화면을 스크롤 다운할 때 앱바가 위로 사라지고 다시 스크롤 업하면 사라졌던 앱바가 다시 나오게 하고 싶은 경우 CustomScrollView 위젯을 이용하면 된다. 우선 실행화면을 살펴보자 앱이 실행되면 화면상단에 앱바가 출력되고 그 하단에는 리스트뷰가 출력된다. 스크롤 다운을 하면 리스트의 아이템과 함께 앱바도 위로 올라간다. 다시 스크롤 업을 하면 리스트의 아이템과 앱바가 아..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이전 강좌에서 살펴본 ListView들은 모두 동일한 타입의 아이템들로 ListView를 구성하여 사용했다. 하지만 필요에 따라 타입이 다른 아이템들로 ListView를 꾸며야 할 경우도 있다. 다음과 같은 앱이 그 예가 될 수 있다. 리스트 아이템 중 굵은 텍스트로 구성되는 아이템이 있는가하면, 중간 크기와 작은 크기의 텍스트 두 줄로 구성된 아이템도 있다. 화면상으로는 2종의 서로 다른 타입의 아이템들이 하나의 ListView에 등록되어 사용되고 있다. 우선 ListView를 구성하는 아이템들과 관련된 코드부터 살펴보자 // ListView의 아이템으로 이용할 추상 클래스 abstract class ListItem..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 그리드 리스트뷰를 사용하는 방법에 대해서 살펴본다. 일반적인 리스트뷰는 한 로우 혹은 컬럼에 하나의 아이템이 등록된다. 하지만 때에 따라 한 로우 혹은 컬럼에 여러 아이템을 등록할 필요가 있을 때도 있다. 이미지 갤러리의 경우가 그리드 리스트뷰의 좋은 예이다. 그리드뷰를 가장 쉽게 이용하는 방법은 GridView.count() 생성자를 이용하는 방법이다. 이유는 한 로우(혹은 컬럼)에 몇개의 아이템을 구성할지를 명시적으로 선언할 수 있기 때문이다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); c..

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