꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 스크린을 넘나드는 이미지 애니메이션에 대해서 알아본다. 예를 들어, 갤러리에 썸네일 이미지가 타잉형태로 존재하다가 특정 썸네일이 선택되면 해당 이미지가 크게 확대되는 앱을 사용해본 경험이 있을 것이다. 썸네일들을 출력하는 스크린에서 썸네일을 선택하여 새로운 스크린에서 해당 이미지를 크게 출력하고자 할때 스크린의 적재됨에도 마치 썸네일이 확대되어 큰 이미지로 변하는 애니메이션 효과를 만들 수 있다. 이런한 애니메이션 효과를 주기위해서 Hero라는 위젯을 이용한다. 두 개의 스크린이 존재할 때 각 스크린에 Hero 위젯을 추가하고 동일한 tag로 연결하며 두 스크린의 이동 중에 Hero 위젯에 등록된 자식..

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 개발할 앱에서 새로운 라우트를 호출할 때 아규먼트를 전달하는 경우가 있다. 예를 들어 라우트의 타이틀과 바디에 출력할 텍스트를 아규먼트로 전달하여 동적으로 구성하는 경우가 한 예이다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( title: 'Navigation with arguments', // 타이틀 설정 home: Home..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이전 강좌에서 라우트간의 이동 방식에 대해서 알아보았다. 이러한 방식을 사용하는 것에 대하여 Flutter 공식문서에는 다음과 같이 설명되어 있다. However, if you need to navigate to the same screen in many parts of your app, this approach can result in code duplication. The solution is to define a named route, and use the named route for navigation. 이를 번역해보면, 만약 당신의 앱의 여러 부분에서 동일 화면으로 이동할 필요가 있다면, 기존의 접근 방법은 ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 라우트(Route)란? Flutter 앱에서는 스크린이나 페이지를 라우트(Route)라고 부른다. 일반 안드로이드의 activity를 Flutter에서는 route라고 한다. 대부분의 Flutter앱은 복수개의 라우트를 가지게되며, 라우트간의 이동이 발생하게 된다. 본 강좌에서는 라우트간의 네비게이션을 하는 방법에 대해서 소개한다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main(){ runApp(MaterialApp( title: "Navigation Basics", home: FirstRoute(), // FirstRoute를 홈으로 설정함 )); ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 레이아웃을 구성하는 방법에 대해서 알아보았다. 지난 강좌까지는 앱과 사용자간의 상호작용이 없는 StatelessWidget만을 이용했다. 상호작용 기능을 넣기 위해서는 Satefulwidget 클래스를 이용한다. 기존 코드를 다음과 같이 수정한다. import 'package:flutter/material.dart'; // MyApp을 시작 위젯으로 설정하여 앱을 실행 void main() => runApp(MyApp()); // 앱의 시작점에 해당하는 위젯 class MyApp extends StatelessWidget { @override Widget build(BuildContext context..

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( // 앱의 테마..