프로젝트 디자인 패턴에는 여러 가지가 있지만, 저는 그중에서 MVVM(Model, View, View Model) 아키텍처를 가장 선호합니다. MVVM 아키텍처는 화면과 로직이 분리되어 더욱 직관적으로 파일 관리가 가능합니다. View에는 UI와 관련된 내용만, View Model에는 동작 로직과 관련된 내용만 작성해서 보다 직관적으로 파일 내용을 유추할 수 있도록 하는 것이죠.GoRouter은 플러터에서 제공하는 공식 패키지 중 하나인데요, 라우팅 기능을 통해 편리하게 페이지 이동이 가능하도록 돕는 패키지입니다. GoRouter를 사용하면 에러, 리디렉팅 등 여러 라우팅 관련 기능들을 적용할 수 있습니다. 이번 포스트에서는 GoRouter를 사용하면서 MVVM 아키텍처를 적용하는 방법에 대해서 알려드리..

플러터로 개발을 하기 위해서는 가장 먼저 플러터를 설치해야겠죠? 플러터를 설치하는 방법엔 여러 가지가 있겠지만, 저는 homebrew를 사용해서 설치하는 방법에 대해서 알려드리려 합니다. Homebrew를 미리 깔아야 하기는 하지만 가장 깔끔하게 설치할 수 있어서 저는 이 방법을 제일 선호합니다. 이 포스트는 맥북 에어 m2 모델을 기반으로 작성되었다는 점을 알려드리며, 바로 시작해 보도록 하죠.   플러터 시작하기 01 : ScaffoldScaffold는 플러터에서 사용되는 가장 기본적인 디자인 레이아웃입니다. 앱의 뼈대라고도 할 수 있죠. 이번 포스트에서는 Scaffold에서 주로 사용되는 속성(property) 몇 가지를 소개해 드리려고 합니torotoblog.tistory.com필요한 프로그램 설..

플러터에서 카메라를 사용해야 할 때 어떻게 하시나요? image_picker 같이 쉽게 사용할 수 있는 패키지를 많이들 사용하리라 생각합니다. 저도 과거엔 image_picker를 많이 사용했었는데요, 최근에 프로젝트를 진행하다가 카메라 UI를 수정해야 할 일이 생겨서 알아보던 중 camera 패키지가 있다는 것을 알게 되었습니다. 이 패키지를 사용하면 UI를 마음대로 커스텀해서 그릴 수도 있는 것과 동시에 카메라에 있는 기능들도 정상적으로 사용이 가능합니다.  flutter_examples/custom_camera/lib at main · wonhj12/flutter_examplesFlutter examples for blog. Contribute to wonhj12/flutter_examples de..

앱 개발을 하다 보면 설정 페이지를 만들게 되는 시점이 옵니다. 알림, 소리, 진동 등 설정부터 개인 정보 처리 등 간단한 앱이어도 최소한의 설정 관리가 필요한 법이죠. 많은 앱들이 가지고 있는 설정이 하나 있습니다. 바로 다크 모드인데요,  앱마다 부르는 명칭은 다르지만 저는 테마 설정이라고 부릅니다. 밝은 화면을 설정하는 라이트 모드, 어두운 화면을 설정하는 다크 모드, 그리고 시스템 설정에 맞게 따라가는 시스템 설정 중에서 원하는 테마로 설정하는 페이지를 만들어 보도록 하겠습니다.   flutter_examples/settings_dark_mode/lib at main · wonhj12/flutter_examplesFlutter examples for blog. Contribute to wonhj1..

버튼이 없는 앱을 찾는 것은 사막에서 바늘 찾기나 다름없습니다. 어떤 액션을 취하기 위해서는 버튼을 클릭하는 행동이 필요합니다. 버튼은 어떤 용도로 사용되는지에 따라서 디자인도 다양하게 있죠. 플러터에는 자주 사용하는 5 가지의 버튼 스타일이 있습니다. 이번 포스트에서는 TextButton OutlinedButton FilledButton ElevatedButton 그리고 IconButton에 대해서 알아보도록 하겠습니다.  플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기많은 앱들이 하단 메뉴를 통해 탭 전환을 하는 형태로 디자인되어 있습니다. Scaffold의 여러 속성 중 bottomNavigationBar 속성이 바로 이 기능을 담당합니다. 이번 포스트에서는 botto..

지난 포스트에서 Scaffold에 대해서 알아보았습니다. 앱 디자인에 사용되는 가장 기본적인 디자인 레이아웃이죠. 이번에는 scaffold에서 사용되는 여러 속성 중 앱 상단에 위치하는 AppBar에 대해서 알아보도록 하겠습니다. 앱의 제목과 뒤로 가기, 메뉴 등의 버튼들이 위치하는 부분이죠.   플러터 시작하기 01 : ScaffoldScaffold는 플러터에서 사용되는 가장 기본적인 디자인 레이아웃입니다. 앱의 뼈대라고도 할 수 있죠. 이번 포스트에서는 Scaffold에서 주로 사용되는 속성(property) 몇 가지를 소개해 드리려고 합니torotoblog.tistory.comAppbar 만들기Scaffold( appBar: AppBar(title: const Text('Appbar Examp..