꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 스낵바의 사용법에 대해서 알아본다. 안드로이드에 토스트 메시지가 있다면 Flutter에는 스낵바 위젯이 있다. 스낵바의 모습은 다음과 같다. 화면 중앙의 RaisedButton을 누르면 화면 하단에 얇은 바(Bar)가 나타나면서 메시지가 출력된다. 추가로 아래 화면에서는 스낵바 우측에 Undo라는 텍스트가 존재하는데 이는 사용자가 누르게 되면 추가적인 액션을 발생하도록 할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(SnackBarDemo()); class SnackBarDemo extends Stat..

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

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서 네임드 라우트를 생성하면서 파라미터를 전달하는 방법을 알아보았다. https://here4you.tistory.com/113 Flutter 강좌 - Pass arguments to a named route | 스크린(라우트)간 아규먼트 전달 강좌 목록 2019/06/04 - [Development/Flutter] - Flutter 강좌 - Hello World 만들기 2019/06/10 - [Development/Flutter] - Flutter 강좌 - Basic widgets | 기본 위젯 2019/06/10 - [Development/Flutter] - Fl.. here4you.tistory.com..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 새로은 스크린(라우트)를 생성하면서 아규먼트를 전달하는 방법에 대해서 알아보았다. 이번 강좌에서는 생성한 스크린으로부터 결과값을 반환받는 방법에 대해서 알아본다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main(){ runApp(MaterialApp( title: 'Returning Data', home: HomeScreen(), // HomeScreen을 홈으로 설정 )); } // 앱 실행시 처음 출력되는 스크린 class HomeScreen extends StatelessWidget{ @override Widget build(Bui..

Flutter 강좌 목록 : https://here4you.tistory.com/120 1 단계 - 코드 기반의 앱을 생성 우선 다음과 같은 코드를 작성한다. import 'package:flutter/material.dart'; // MyApp을 시작 위젯으로 설정하여 앱을 실행 void main() => runApp(MyApp()); // 앱의 시작점에 해당하는 위젯 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 매트리얼앱을 생성하여 반환 return MaterialApp( title: 'Flutter Layout Demo', // 앱의 타이틀 theme: ThemeData( // 앱의 테마..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 시간에는 Flutter의 매트리얼 앱의 레이아웃을 구성하기 위해 주요하게 사용되는 Scaffold 컴포넌트에 대해서 알아보겠습니다. 소스코드는 다음과 같습니다. import 'package:flutter/material.dart'; void main(){ // 매트리얼앱을 실행 runApp(MaterialApp( title: "Flutter Tutorial", // 타이틀 설정 home: TutorialHome(), // 앱의 루트 경로 TutorialHome을 실행 )); } class TutorialHome extends StatelessWidget{ @override Widget build(BuildCont..