꿈꾸는 시스템 디자이너

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 이번 강좌에서는 스크린에 드로워 위젯을 추가하는 방법에 대해 알아본다. 드로워(Drawer)는 서랍이라는 의미를 가지며 앱의 메뉴버튼을 누르면 화면한컨에 팝업되는 서브 스크린으로 이해할 수 있으며 아래와 같은 모양을 가진다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final appTitle = 'Drawer Demo'; @override Widget build(BuildContext context) { return MaterialApp( ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 앱을 개발할 때 스크린의 특정 앨리먼트를 보이거나 사라지게 할 필요가 있다. 이러한 기법을 페이드 패이드 인 & 패이드 아웃이라고 한다. 이번 강좌에서는 컨테이너를 패이드 인 & 아웃 하는 애니메이션 효과를 부여하는 방법에 대해서 알아본다. 우선 실행 화면을 살펴보자. 스크린 중앙에 사각형 모양의 도형이 사라지고 다시 나타나고를 반복한다. 이는 스크린 중앙에 위치한 컨테이너가 스크린 우측하단의 플로팅액션버튼을 누를 때 마다 패이드 인되고 패이드 아웃되는 애니메이션 효과가 발생하는 것이다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runA..

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