📖 개발 공부/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] Flutter는 어떻게 동작하는가?📖 개발 공부/flutter 2023. 8. 5. 11:42
Flutter Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트다. 이는 구글에서 만들어졌으며 본격적인 출시는 2017년 5월부터 시작되었는데, 무료 오픈 소스이기에 누구나 편리하게 접근이 가능한 모바일 UI 프레임워크이다. Flutter architectural overview A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design. docs.flutter.dev flutter 애플리케이션이 어떻게 동작하는지 거시적인 관점에서 보자 👀 네이티브 방식이 동작하는 원리 swift로 ios를, 혹은 java로 android를 만..
-
[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] Line Chart 구현하기📖 개발 공부/flutter 2023. 5. 7. 14:15
다음과 같이 선차트를 flutter에서 그려보려고 한다. fluttergems 사이트에서 차트를 검색하여, syncfusion_flutter_charts 패키지를 찾았다. 이 패키지를 이용하여 LineChart 위젯 클래스를 만들었다. LineChartData라는 데이터 클래스를 이용해서 LineChart를 그리도록 했다. LineChart에 LineChartData 리스트인 dataList, marker 색상, baseValue (위의 분홍색 기준선) 를 파라미터로 넣어 LineChart 클래스를 생성하도록 했다. LineChartData의 name을 String 타입으로 설정하여 x축의 어떤 데이터든(날짜, 년도, 월) 그릴 수 있도록 했다. (위의 차트 참고) 그리고 데이터마다 marker 색상을 ..
-
[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: ..
-
[Flutter] 이미지 정방형으로 자르기 및 radius 설정📖 개발 공부/flutter 2023. 3. 12. 19:36
이미지 정방형으로 자르기 SizedBox의 width, height 속성을 이용해 같은 길이로 설정한다. 그리고 Image widget의 fit.cover 옵션을 추가한다. SizedBox( width: 100, height: 100, child: Image.network( "https://img-cf.kurly.com/shop/data/goodsview/20211223/gv10000260857_1.jpg", fit: BoxFit.cover, ), ) fit 옵션 설명 BoxFit.cover 비율대로 조정한 다음 적당히 잘라 버리고 늘리는 현상이 없다. BoxFit.fill 원본 이미지 비율 무시하고 늘리는 현상이 있다. BoxFit.contain 원본 이미지 비율 그대로 보여주지만 크기에 안 맞으면 여..