앱 개발 기록

Parse Issue (Xcode): Module 'sqflite' not found 에러 해결 rm ios/Podfile flutter build ios

Tabbar 위젯 기본 코드 import 'package:flutter/material.dart'; /// Flutter code sample for [TabBar]. void main() => runApp(const TabBarApp()); class TabBarApp extends StatelessWidget { const TabBarApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(useMaterial3: true), home: const TabBarExample(), ); } } class TabBarExample extends StatelessWidget { con..

flutter에서 좌측에 고정된 사이드바를 구현하였다. 일반 모바일폰이 아닌 태블릿이나 웹에서 사용하기 용이하다. 모바일폰에서는 sidebar 보다는 drawer을 많이 사용하는 것 같다. 패키지 설치 flutter pub add sidebarx 전체 예제 코드 공식 문서에 있는 example이다. 주석에도 간단하게 설명되어있지만 아래에서 주요 파라미터만 뽑아서 다시 정리하였다. import 'package:flutter/material.dart'; import 'package:sidebarx/sidebarx.dart'; void main() { runApp(NavHome()); } class NavHome extends StatelessWidget { NavHome({Key? key}) : super(..

flutter 달력 기능 구현 패키지 flutter pub add flutter_calendar_carousel 사용 방법 ( 주석 참고 !! ) class Calendar extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'dooboolab flutter calendar', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new CalenderWidget(title: 'Flutter Calendar Carousel Example..

MVVM 패턴이란? Model + View + ViewModel 을 말한다. Model 데이터를 다루는 부분이다. 데이터를 가져오고 저장하는 역할을 한다. View 사용자 인터페이스를 담당하는 역할을 한다. 사용자에게 화면을 보여주며, 사용자의 여러가지 입력을 처리한다. ViewModel View와 Model의 중재자 역할을 하며, View에서 발생하는 이벤트를 감지하고, 그에 맞는 로직을 수행한다. Model의 데이터를 가공하여 View에 제공하기도 한다. MVVM 패턴 장점 - Observable 패턴을 이용하기 때문에 DB를 관찰하고 자동으로 UI를 갱신해줄 수 있다. 즉, Databinding이 가능하다. - UI 로직과 비즈니스 로직을 분리하기 때문에 유지보수하기 용이하다. - View 와 Vi..

Getx 만 사용해오다가 프로젝트에서 Riverpod을 사용하게되어서 공부하였다. Getx는 사용하기 편리하고 자유성이 높은 프레임워크지만, 여러가지 이슈가 있고 대응이 느리다고한다. 따라서 Getx에만 너무 의존하지 말고, Provider/Riverpod/Bloc 중 하나정도는 더 공부하는 것이 좋다. flutter Riverpod 이란 "반응형 캐싱 및 데이터 바인딩 프레임워크" 이다. Riverpod과 Provider의 개발자는 같은 개발자이며, Provider의 문제점을 해결하여 만든 것이 Riverpod이라고 한다. Install flutter pub add flutter_riverpod Provider 종류 Provider은 상태관리를 할 데이터 변수를 정의하는 것이다. 1. Provider ..

'Future'과 'FutureBuilder'은 Flutter에서 비동기 작업을 수행하고, 결과를 UI로 표시하는데 사용되는 개념이다. 먼저 동기와 비동기의 차이에 대해 알아보면, 동기는 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행하는 것이고, 비동기는 요청을 보냈을 때 응답이 돌아오는지 여부에 상관없이 다음 동작을 동시에 수행 하는 것이다. 그럼 개발 중에 동기와 비동기는 왜 중요할까 ? 예를들어, 서버로부터 대용량의 데이터를 받아와서 화면에 출력해주는 것을 구현한다고 해보자. Flutter는 기본적으로 동기적인 방식으로 작동하므로, 대용량 데이터를 받아올 때 다른 작업은 중지될 것이다. 그러므로 데이터를 다 받아오기 전까지 사용자 화면에 아무것도 표시되지 않는다. 하지만 비동기 방식을 ..

Flutter에서 webview_flutter 패키지를 활용하여 앱에 웹뷰를 연결해보려고 한다. 최근에 webview_flutter 라이브러리가 업데이트되어 사용법이 변경되었다. 이전에는 WebView() 위젯으로 웹뷰를 생성했었는데, 현재는 이 방법이 작동하지 않아 에러가 발생하는 것 같다. 이제는 WebView위젯이 아닌 WebViewController를 사용한다. 이 변화에 따라 webview_flutter 패키지를 사용하는 방법을 정리해보겠다. https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. ..

tflite_flutter 패키지를 이용하여 Flutter 앱에 인공지능을 결합시키는 방법 tflite_flutter이 생기기 이전에는 tflite라는 패키지를 사용하였었다. 하지만 Flutter 버전이 업데이트되면서 tflite 패키지는 사용하지 못하도록 되었고, tflite_flutter 패키지가 나왔다. 나온 지 얼마 안된 패키지인 만큼 자료도 너무 없어 사용하기 힘들었다. 사용하는 flutter 버전을 flutter 2.2.3 으로 낮추면 기존의 tflite를 사용할 수 있지만, 다른 JDK버전에서 오류가 많이 나오고 다른 모든 연결된 것들을 저 버전에 맞추어야되서 번거로울 것 같았다. 그래서 tflite_flutter을 사용하였다. https://pub.dev/packages/tflite_flu..

플러터(Flutter) 설치 플러터(Flutter) 설치 및 환경변수 설정 방법 입니다. 먼저 설치를 위해 플러터 홈페이지로 이동합니다. https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flutter.dev 들어가서 우측 하단을 보면 Get Started 버튼을 클릭합니다. 이후 Windows 기준으로 Windows 버튼을 누릅니다, 그리고 위 사진과같이 파란색 zip파일을 다운로드..