nomad-programmer

사용자에게 값을 입력받을 때 사용하는 위젯이 TextField 위젯(또는 TextFormField 위젯) 이다. TextEditingController 클래스의 인스턴스를 통해서 TextField 위젯에 작성된 값을 얻을 수 있다. 다음은 TextEditingController 클래스를 사용하는 예제이다. TextField 위젯이 2개 있고 입력값이 변하면 각각 로그를 출력한다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ..

플러터 코드롤 UI를 작성할 때 한 번에 완벽한 코드를 만들 수 있는 사람은 거의 없다. 작업 하다 보면 Column이나 Row로 감싸거나 Padding으로 감싸는 경우가 빈번하다. 그렇게 되면 나중에 수동으로 Padding을 제거하거나 Column을 제거하는 일이 발생해 굉장히 불편하다. 여러 위젯이 중첩된 코드 중간에 위젯을 추가하거나 삭제할 때 정확한 위치에 괄호를 넣거나 제거하는 것이 얼마나 어려운 일인지 겪어보면 알게 된다. 현재 위젯을 벗겨내거나 다른 위젯으로 감싸는 방법 Visual Studio Code 단축키 : Android Studio 단축키 : 다른 위젯으로 감싸고 싶은 위젯 코드 앞에 커서를 두고 "단축키"를 누른다. Wrap with XXX 형태로 메뉴가 표시되는데 XXX 위젯으로..

아래의 코드를 보자. // async*는 yield를 쓴다는 의미이다. Stream createStream(List numbers) async* { for (int number in numbers) { // yield는 제너레이터를 만든다는 뜻이다. yield number; } } void main() { // 스트림 생성 var numStream = createStream([1, 2, 3, 4, 5]); numStream.listen((int number) => print(number)); } /* 결과 1 2 3 4 5 */ 스트림을 만드려면 async*와 yield를 써야 한다. 즉, 스트림 형식을 반환할때는 async* 키워드를 붙여야 한다. async* : async*는 제너레이터를 만든다는 뜻..

비동기 코드의 중요성 비동기 작업은 다른 작업들이 비동기 작업이 완료 되는 것을 기다리는 동안 다른 일들을 완성하도록 진행한다. 네트워크에서 데이터 가져오기 데이터베이스 연산 파일에서 데이터 읽기/쓰기 등등... 비동기 작업을 위해 Future 클래스와 async, await 키워드를 사용한다. Future Future는 비동기 작업의 결과를 2개의 상태로 표현한다. 상태에는 완성(completed)된 상태와, 미완성(uncompleted) 상태로 나뉜다. 미완성(uncompleted) 상태는 값을 만들어 내기 전의 Future의 상태를 말한다. 미완성 (Uncompleted) 비동기 함수를 호출하면, 미완성 Future를 리턴한다. Future는 함수의 비동기 작업이 끝나거나 에러를 던지는 것을 기다린..

# Slidable (리스트 아이템 슬라이드 기능) https://pub.dev/packages/flutter_slidable flutter_slidable | Flutter Package A Flutter implementation of slidable list item with directional slide actions that can be dismissed. pub.dev # sqflite (SQLite Flutter 버전) pub.dev/packages/sqflite sqflite | Flutter Package Flutter plugin for SQLite, a self-contained, high-reliability, embedded, SQL database engine. pub.dev ..

push() 메소드로 새로운 화면이 실행되고 pop() 메소드로 이전 화면으로 돌아간다는 것을 확인했다. 실행되는 화면은 스택(Stack) 구조로 메모리에 쌓이게 된다. 스택은 나중에 들어간 것이 먼저 나오는 구조이다. 스택에서 모든 화면이 제거되면 앱이 종료된다. StatelessWidget & StatefulWidget 클래스의 동작 방법 차이점 StatelessWidget 클래스 동작 build() 메소드가 언제 호출되는지 확인해보자. 각 화면의 build 메소드의 return 앞에 어떤 화면인지 확인할 수 있도록 print() 로그를 작성하자. 화면이 표시되면서 build() 메소드가 호출된다. pop() 메소드로 뒤로 돌아갈 때는 두 번째 화면에서 받은 Text 객체가 출력되었다. Statefu..

새로운 화면으로 전환하거나 이전 화면으로 돌아가는 것을 네비게이션이라고 한다. 새로운 화면으로 이동 새로운 화면을 띄우거나 이전 화면으로 돌아가는 방법을 이용해 두 화면을 내비게이션 하는 앱을 만들어보자. // main.dart import 'package:flutter/material.dart'; import 'package:test2/first_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatc..

머터리얼 디자인은 안드로이드에 적용하려고 구글이 만든 디자인 규칙이다. 그러므로 아이폰에는 어울리지 않는다. 좀 더 아이폰스러운 디자인을 적용하려면 쿠퍼니노 디자인을 사용해야 한다. flutter/cupertino.dart 패키지에는 다양한 쿠퍼티노 디자인용 UI 위젯이 준비되어 있다. Cupertino로 시작하는 이름의 클래스들이 이에 해당되며 사용 방법이 머터리얼 위젯과 비슷하므로 쉽게 적용할 수 있다. 여담이지만 두 디자인 컨셉을 섞어서 사용할 수도 있고 안드로이드 앱을 아이폰스럽게 만드는 것도 가능하다. 쿠퍼티노 기본 UI 쿠퍼티노 디자인에서는 AppBar 대신 CupertinoNavigationBar를 사용하며 CupertinoSwitch, CupertinoButton 등을 사용한다. 쿠퍼티노 ..

SliverAppBar & SliverFillRemaining SliverAppBar와 SliverFillRemaining은 화면 헤더를 동적으로 표현하는 위젯이다. 헤더를 위로 스크롤하면 헤더 부분이 작아지면서 헤더 하단에 있던 정적인 내용만 보이는 AppBar 형태로 애니메이션된다. 이런 효과를 Sliver 효과라고 부른다. SliverAppBar와 SliverFillRemaining을 사용한 예이다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mate..

ETF(상장지수펀드)는 기초지수의 성과를 추적하는 것이 목표인 인덱스펀드로, 거래소에 상장되어 있어서 개별주식과 마찬가지로 기존의 주식계좌를 통해 거래를 할 수 있다. 그 구성종목과 수량 등 자산구성내역이 투명하게 공개되어 있고, 장중에는 실시간으로 순자산가치(NAV)가 제공되어 거래에 참고할 수 있다. ETF는 1좌를 거래할 수 있는 최소한의 금액만으로 분산투자 효과를 누릴 수 있어 효율적인 투자수단이며, 펀드보다 운보수가 맞고 주식에 적용되는 거래세도 붙지 않는다. ETF의 장점은 종목 선정 및 분산투자에 익숙하지 않은 상태에서도 안정적으로 자산을 운용하기에 적합하며, 또한 가격 변동이 그렇게 크지 않기 때문에 주식 초고가 투자하기에도 좋다. NAVER FINANCE ETF ITEM LIST http..

Hero 위젯이 화면 전화시 애니메이션 효과를 지원했다면 AnimatedContainer 위젯은 한 화면 내에서 setState() 함수를 호출하여 화면을 새로 그릴 때 변경된 프로퍼티에 의해 애니메이션 되도록 해준다. Container 위젯과 쓰임새는 비슷하지만 duration, curve 등의 애니메이션 관련 프로퍼티가 있다. duration 프로퍼티는 필수이며 애니메이션되는 데 걸리는 시간을 Duration 클래스를 사용해 정의할 수 있다. Curves 클래스에는 미리 정의된 여러 애니메이션 효과가 들어 있다. AnimationContainer( duration: Duration(seconds: 1), // 1초 동안 애니메이션 적용 width: 100.0 // 가로 길이 height: 150.0 ..

Hero 위젯은 화면 전환시 자연스럽게 연결되는 애니메이션을 지원한다. 이전 화면으로 돌아갈 때도 자연스럽게 애니메이션이 동작한다. Hero 위젯 사용 방법은 애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고, tag 프로퍼티를 반드시 동일하게 지정해야 한다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colo..