auto_routeauto_route는 Flutter에서 route 내용의 코드를 자동으로 생성해주는 라이브러리입니다. auto_route는 라우트 관리를 단순화시켜주고, 코드의 반복을 줄여주기 때문에 유지 보수 측면에서 용이합니다. 의존성 추가필요한 의존성을 추가합니다.flutter pub add auto_routeflutter pub add --dev auto_route_generator build_runner auto_route_generator와 build_runner는 라우팅 관련 코드를 생성하기 위해 필요합니다. 구현screen 파일 생성화면에 띄울 HomeScreen와 FirstScreen 파일을 생성합니다.// home_screen.dartimport 'package:auto_route/a..

Run Pubspec Script (RPS)node 프로젝트에서는 package.json의 scripts를 사용해서 정의해둔 스크립트를 명령어 하나로 수행할 수 있지만, flutter에서는 기본적으로 제공해주고 있지 않습니다. RPS (Run Pubspec Script) 툴을 사용하면 동일한 기능을 사용할 수 있습니다. 툴 설치rps 라이브러리를 global scope로 설치합니다.dart pub global activate rps rps 명령어 사용을 위해, 환경변수를 추가합니다.vim ~/.zshenv# ~/.zshenv# flutterexport PATH="$PATH:$HOME/.pub-cache/bin" pubspec.yaml에 원하는 scripts를 추가합니다.scripts: run: flut..

Flutter 엔진 및 플러그인 초기화Flutter에서 WidgetsFlutterBinding.ensureInitialized() 메서드는 Flutter 앱이 실행되기 전에 앱의 루트 위젯 생성, 리소스 로딩, 플러그인 초기화 등의 필요한 초기화 작업을 수행합니다. 일반적으로 main() 함수나 애플리케이션의 진입점에서 호출하여 사용합니다. (진입점에서 호출해야 애플리케이션이 시작될 때, 모든 초기화가 완료된 후 앱을 수행할 수 있기 때문) 초기화하는 영역을 자세하게 살펴보면, Flutter 엔진 초기화Flutter 엔진은 그래픽 렌더링, 이벤트 처리, 상태 관리 등과 같은 핵심 기능을 담당합니다. WidgetsFlutterBinding.ensureInitialized()는 Flutter 엔진을 초기화하..

Name Routing Name Routing은 web과 같이, 경로를 이용하여 라우팅 될 위젯(widget)을 정의하는 routing 방법입니다. 예시를 들면 아래와 같습니다. @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailScreen(), }, ); } 실제로 간단하게 구현을 해보겠습니다. 우선 flutter 프로젝트를 만들고, HomeScreen과 SettingScreen 2개의 스크린 위젯을 생성하겠습니다. // home_screen.dart import 'package:flutter/materi..

Flutter 설치 플러터 설치 요구 스펙 운영 체제(Operation System): macOS 10.14(Mojave) 이상 디스크 공간: 2.8GB (IDE/도구용 디스크 공간은 포함되지 않음) Rosetta 설치 (Apple 실리콘 Mac 만 설치) flutter를 설치하기 전에 Apple 실리콘이 탑재된 mac의 경우는 Rosetta를 설치해줘야 합니다. 만약 Intel 칩을 사용하는 Mac은 설치하지 않아도 됩니다. 설치는 아래 명령어를 사용해서 설치할 수 있습니다. sudo softwareupdate --install-rosetta --agree-to-license Rosetta 사용하면 Intel 칩이 탑재된 Mac용으로 만들어진 Application을 Apple Silicon이 장착된 M..

permission_hanlder 라이브러리 flutter 에서 카메라와 같이 기기 권한 획득을 위해 편리하게 사용할 수 있는 라이브러리가 있습니다. 본 글에서는 permission_hanlder 라이브러리를 사용하면 쉽게 권한 획득을 할 수 있기 때문에, 해당 라이브러리를 사용해서 권한 획득하는 방법에 대해 소개합니다. 우선 아래 명령어를 통해 설치합니다. flutter pub add permission_handler 권한 획득하기 가이드 문서에도 설명이 잘되어 있으나 간단하게 정리하면, 아래와 같이 권한 획득 요청을 할 수 있습니다. if (await Permission.camera.request().isGranted) { // 권한 획득에 성공했을때에 대한 처리 로직 } else { // 실패한 경..

플러터 프로젝트에 원하는 프로젝트 적용하기 본 글에서는 네이버 나눔글꼴을 플러터(flutter) 프로젝트에 적용하는 방법에 대해 소개합니다. https://hangeul.naver.com/font/nanum 네이버 글꼴 모음 네이버가 만든 150여종의 글꼴을 한번에 만나보세요 hangeul.naver.com 물론 어떤 폰트를 사용하더라도 적용하는 방법은 동일합니다. 우선, 적용할 폰트를 다운로드 받은 뒤에 프로젝트에 옮깁니다. 본 글에서는 프로젝트 root에 assets/fonts 라는 디렉토리를 생성하도록 하겠습니다. 그리고, 해당 폴더에 다운로드 받은 폰트를 넣습니다. pubspec.yaml 폰트 설정 이미지든 폰트든 리소스 파일을 사용하려면 pubspec.yaml 파일에 정의해햐 합니다. 플러터 프..

WebView 웹뷰(webview)는 네이티브 앱에서 웹 컨텐츠를 띄우기 위해 사용하는 기술입니다. 예시를 들면, 모바일 앱 내에서 결제를 진행할 때, 결제 창을 별도의 브라우저를 띄울 필요 없이 앱 내부에서 바로 웹 화면을 띄울 수 있습니다. 위와 같은 방법으로도 사용할 수 있지만, 스타트 업과 같이 작은 규모의 회사에서는 안드로이드와 iOS 개발, 2개 플랫폼에 대해 모두 개발하기에 리소스가 많이 들기 때문에 웹 개발을 한 뒤 네이티브 앱에 웹 뷰를 띄어서 서비스를 제공하기도 합니다. Flutter에서 Webview 띄우기 flutter에서 손쉽게 웹 뷰를 사용 할 수 있도록 도와주는 라이브러리가 있습니다. 본 글에서는 flutter 개발 팀에서 만든 라이브러리인 webview_flutter 를 사용..