Jun's TID

screen_item.dartProvider는 앞서 다룬 Bloc과 비슷하게 단순히 앱 전역에 상태를 공유한다는 것 말고도 관심사를 분리할 수 있다는 특징이 있다. 기본적으로 플러터는 UI와 기능이 함께 작성되기 때문에 한 파일 내의 코드 양이 많아질 수 있으며, UI와 기능을 분리하기 어려워 수정 등이 불편하다. Provider를 사용하면 Provider의 주요 개념에 따라 코드를 작성하게 되고, 자연스럽게 UI와 상태를 관리하는 기능 영역을 분리할 수 있다. 바로 한번 들어가보자. Provider 패키지의 구성 요소는 기본적이로 상태(데이터)를 생산 / 소비하는 영역으로 나누게 된다. 상태를 생산하는 영역을 Provider, 소비하는 영역을 Consumer라고 한다. 상태를 생산한다는 것은 상태를 만..

그 동안 여러 예제를 작성해보면서 State를 활용하기 위해 Stateful Widget을 사용했다. 하지만 Stateful Widget을 사용하여 State를 제어하는 방식은 분명한 한계를 가지고 있는데, 그건 바로 위젯 내에서만 State 제어가 가능하다는 것이다. 즉, State는 Stateful widget이 선언된 해당 페이지에서만 관리되기 때문에 그 페이지를 벗어나면 새로운 화면이 빌드되어 해당 State가 전달되지 않는다. 따라서 앱 전역에 걸쳐 관리되는 State가 필요한데, 이런 경우에는 다양한 위젯에서 해당 State에 접근하게 되니 로직이 굉장히 복잡해지기 쉽다. Flutter는 이런 불필요하게 복잡한 로직과 코드를 최소화하고 일정하게 전역 State를 관리하기 위한 상태 관리 도구를..

기초적인 CRUD를 구성을 완료했으니, 동일한 Todo List 프로젝트에서 News 정보를 가져와 띄워줄 수 있도록 HTTP 방식으로 구현된 API를 연동해보도록 하자. 사실 Native와 Java에서 많이 다루기도 했고, 그닥 어려운 내용 없이 Http 패키지를 사용하는 방법이 전부지만, 그래도 한번 다루고 넘어가는 게 좋을 거 같다. 바로 확인해보자. 우선 News 정보를 가져와야 하니, https://newsapi.org/ 에서 로그인 후 API Key를 발급 받았다. API Doc 이나 사용법은 해당 페이지에 자세하게 설명이 되어 있으니, 참고하도록 하자. 이제 HTTP 요청을 처리해야 하니, 해당 패키지를 dependency에 추가해주자. ◎pubspec.yaml # HTTP http: ^0...

지금까지 예제를 다루면서 거의 모든 클래스는 StatelessWidget을 상속 받아서 작성을 했었다. 이는 간단히 말해서 딱히 상태 변화를 주어야할 변수를 클래스 내에 가지고 있지 않았기 때문에 굳이 State라는 개념을 사용하지 않은 것이다. 오늘은 직전 포스팅에서 사용했던 FirstScreen을 가지고 State, 상태라는 개념을 살펴보려고 한다. State, 상태는 Flutter에서 변할 수 있는 데이터를 뜻한다. 그리고 이 데이터가 변할 때 화면 전체가 다시 빌드되는 것이 아닌, 데이터와 관련이 있는 위젯만 다시 빌드가 된다. 이전까지 StatelessWidget을 사용했었는데, 이 StatelessWidget에서는 변수를 선언하거나 사용하면 const로 선언해달라는 경고가 뜨는 이유가 상태를 ..

Flutter의 모든 화면 전환 관련 이벤트는 Navigator라는 위젯을 통해 처리된다. Navigator를 활용하면 특정 화면으로 이동하거나 이전 화면으로 돌아가는 등의 기능을 구현할 수 있다. 예제는 lib 하위에 screens 라는 디렉토리를 추가하여 first_screen과 second_screen Class를 생성하여 버튼으로 두 화면을전환하는 방식으로 작성하려 한다. 바로 한번 확인해보자. ◎main.dart import 'package:flutter/material.dart'; import 'package:first_flutter_ex/screens/first_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends ..

원래는 기본 위젯을 다루면서 같이 다루려고 했는데, Flutter가 기본적으로 제공하는 버튼이 4가지나 되어서 따로 이렇게 포스팅한다. 바로 한번 확인해보자. - TextButton 가장 간단한 형태의 버튼으로, 테두리도 없고, 안에 Text만 존재하는 버튼이다. - ElevatedButton 배경색이 칠해져 있는 상태의 버튼이다. - OutlineButton 이름과 같이 테두리가 그려져 있는 버튼이다. - IconButton 위 모든 버튼들이 child의 형태로 위젯을 구성했던 것과는 달리 Icon()을 인자로 받아 아이콘 형태의 버튼을 만드는 버튼이다. ◎main.dart class MyHomePage extends StatelessWidget { final String title; MyHomePag..

이번 포스트에서는 Flutter를 처음 접하는 만큼 필수적으로 알아야 할 기본 위젯 중 몇가지 기초적인 내용을 정리하려고 한다. Flutter는 기본적으로 모든 컴포넌트가 위젯이며, 누구나 위젯을 만들고 배포할 수 있기 때문에 수도 없이 많은 위젯들이 있다. 웹상에서 사람들이 올려놓은 유용한 오픈소스 위젯들을 확인하고 다운받을 수 있으며, Flutter의 공식 유튜브 채널에서도 다양한 위젯들의 설명을 확인할 수 있다. - pub.dev: https://pub.dev Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, Angul..

직전 포스팅에서 구성해본 Flutter 기본 프로젝트에서 _MyHomePageState 클래스 내부에 Scaffold라는 클래스가 있었다. Scaffold는 Flutter가 지원해주는 디자인 방식인 Material library 하위 클래스이며, 찾아보니 서랍, 스낵바, 하단 시트, 플로팅 버튼 등을 간단하게 사용할 수 있도록 지원해주는 클래스로 보인다. 더 자세한 Reference는 여기를 참조하도록 하자. Flutter 기본 예제 코드로 한번 살펴보자. class _MyHomePageState extends State { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(B..

드디어 첫 Flutter 프로젝트를 만들어보려고 한다. 기본적인 인텔리제이 셋팅은 플러그인을 설치하고, 사용할 SDK 를 셋팅하는 것이 전부라 일단은 넘어가도록 하고 이번 포스팅에서는 Flutter 프로젝트를 만들면 자동으로 생성되는 기본 구조를 좀 살펴보면서 각 파일과 코드가 어떤 역할을 하는 지 확인하려고 한다. 바로 시작해보자. 우선, Flutter 프로젝트를 생성하면 확실히 네이티브 환경보다는 더 복잡한 디렉토리 구조가 눈에 띈다. Android와 iOS를 모두 지원하는 어플을 생성하기 때문에 android, ios 라는 이름의 디렉토리를 가지고 있다. 이 두 디렉토리는 main.dart에서 작성된 코드를 컴파일하면서 자동으로 Flutter 가 구성해주는 곳이기 때문에 깊게 살펴볼 필요는 없다. ..