FLUTTER
-
📸 [Flutter] Google Cloud OCR 연동하기📖 개발 공부/flutter 2023. 10. 18. 22:48
나는 독서 기록을 할 때, 기억하고 싶은 구절은 기본 카메라앱으로 스캔 후 복사하여 노션에 붙여넣고 있다. 하지만 이 과정은 나에게 꽤나 번거롭다. 그래서 카메라에서 문장을 스캔&선택한 후 곧바로 해당 문장에 대한 나의 생각을 기록하고 싶어서 독서 기록 앱을 만들고 있다! 플러터로 개발을 하고 있고, 플러터로 Google Cloud OCR을 연동하여 이 기능을 구현해보려구 한다! 📸 코드 작성에 앞서, Google Cloud에서 제공하는 Vision AI 를 사용하기 위해 키를 발급 받아야 한다. 다음 링크에 들어가서 발급 받으면 된다. https://cloud.google.com/vision cloud.google.com 발급받는 과정 요약 Vision AI 무료로 사용해보기 → 가입 → 서비스 계정 ..
-
[Flutter] .env 파일 이용하여 환경변수 관리하기📖 개발 공부/flutter 2023. 10. 2. 09:00
Flutter에서 .env 파일을 이용하여 환경변수를 쉽게 관리할 수 있다. 방법은 flutter_dotenv 패키지를 사용하는 것이다! flutter_dotenv | Flutter Package Easily configure any flutter application with global variables using a `.env` file. pub.dev (나는 flutter pub get 명령어를 이용해서 설치했다.) 1. assets 폴더 하위에 .env 파일을 생성한다. 애플리케이션에 사용할 값들을 .env 파일에 다음과 같은 형태로 저장한다. AUTH_TOKEN_KEY=auth_token_value 2. 그리고 pubspec.yaml에 다음과 같이 .env 파일 경로를 추가한다. assets:..
-
[Flutter] App Lifecycle (라이프사이클)📖 개발 공부/flutter 2023. 7. 23. 11:58
이전 포스팅에서 Flutter의 Stateless Widget과 Stateful Widget을 알아보았다. [Flutter] Stateless Widget / Stateful Widget 앱 생명 주기의 생성, 렌더링, 업데이트 및 종료 방식을 알아야지 앱 생명 주기를 기반으로 코드를 이해하는 데 도움이 된다. Flutter의 모든 것이 Widget으로 이루어져 있어 생명 주기에 앞서 Flutter ayoung0073.tistory.com 이번엔 상태가 변하는 Stateful Widget을 기준으로 LifeCycle을 살펴보도록 하자! 앱 생명주기(라이프사이클) 단계 앱은 다음과 같은 상태의 LifeCycle을 가진다. createState() initState() didChangeDependencies..
-
[Flutter] Stateless Widget / Stateful Widget📖 개발 공부/flutter 2023. 7. 22. 17:44
앱 생명 주기의 생성, 렌더링, 업데이트 및 종료 방식을 알아야지 앱 생명 주기를 기반으로 코드를 이해하는 데 도움이 된다. Flutter의 모든 것이 Widget으로 이루어져 있어 생명 주기에 앞서 Flutter의 Widget에 대해 알아보자. Widget Flutter에는 크게 2가지 유형의 위젯이 있다. Stateless Widget Stateless Widget은 런타임에 크게 변경되지 않는 위젯이다. 그렇기 때문에 상태(State)를 다룰 필요가 없으며, 영구적으로 변하지 않는 변수, 버튼, 심볼 등과 같은 표현 요소를 나타내거나 앱에서 데이터를 가져오는 데에 쓰인다. 이러한 위젯은 build 메서드를 오버라이드하여 위젯을 반환한다. Stateless 위젯은 UI가 데이터의 변경에 의존하지 않는..
-
[Flutter] TabBar, TabBar 정렬📖 개발 공부/flutter 2023. 4. 11. 23:30
DefaultTabController, TabBar, TabBarView를 사용하여 탭을 넣어보자. TabBar DefaultTabController 선택된 탭과 컨텐츠를 동기화하고, 기본 컨텐츠를 유지하려면 TabController가 필요하다. const DefaultTabController({ super.key, required this.length, this.initialIndex = 0, required this.child, this.animationDuration, }) length: 탭의 개수 (필수 파라미터) TabBar Tab Widget 목록 탭을 문자, 아이콘 또는 하위 Widget을 명시할 수 있다. Align( alignment: Alignment.centerLeft, child: ..