flutter22 [Flutter] FVM (Flutter Version Manager) 개인적으로는 취미로만 사용 중이라 필요성을 못느꼈지만, flutter에도 version manager가 존재하더라고요. 간단하게 사용법만 알아보도록 할게요. ^^ Install MAC에서는 brew를 사용하여 간단히 설치할 수 있습니다. $ brew tap leoafarias/fvm $ brew install fvm Windows에서는 choco를 사용하면 됩니다. $ choco install fvm 설치 후 다음의 명령어로 확인해 볼 수 있습니다. $ fvm --version Show Release Versions 다음의 명령어로 설치 가능한 버전들을 확인할 수 있습니다. $ fvm releases Install Specific Flutter Version 원하는 버전을 선택했다면 다음 명령어로 설치를.. 2023. 9. 17. [Flutter] Provider Provider는 application 전역에 걸쳐 상태를 공유하는 방법 중 하나입니다. 상속 관계가 깊을 경우 정보 공유를 하려면 부모 자식 간에 계속 해서 정보를 전달해야하는 불편함이 있는 데, 이를 해소해 줄 수 있습니다. 뭐 다른 framework들을 사용해 봤다면 익숙한 개념이실 거에요. Provider는 여러 가지 provider를 제공해 주는 데, 공식 페이지 설명이 영 괴상망측해서 알아보기가 힘드셨을 거에요. (제가 그랬거든요...) 이번 포스팅에서는 기본적으로 쉽게 사용하실 수 있는 방법을 알려드릴게요. Install Package 먼저, 필요한 package를 설치해 줍니다. pubspec.yaml 파일에 다음의 내용을 추가해 줍니다. dependencies: flutter: sdk: .. 2023. 8. 12. [Flutter] Online Multitools 개발기 Flutter를 공부해본 김에 평소에 필요했던 것을 한 번 만들어 봤습니다. https://hmultitools.web.app/ HoYa's Online Multi Tools hmultitools.web.app 임베디드 개발자이다보니 비트단위 계산을 하는 경우가 많아서, binary, hex 계산기가 필요해서 만들기 시작했어요. 만드는 김에 계산기 시리즈로 만들어볼까? 싶어서 평소에 카드 할인 같은 거 계산할 때 필요했던 할인 계산기도 만들고, 온라인 쇼핑할 때 대략적인 환율 정보를 매번 검색하느라 귀찮아서 환전 계산기도 만들었어요. ㅋㅋ 거기에 추가로 가끔 우리나라는 안쓰는 단위 정보가 쉽게 변환이 안되서 헷갈려서 필요했던지라 단위 변환기도 만들어 넣고, BMI 계산기도 넣어봤어요. 이제 사용해 보면서.. 2023. 8. 6. [Flutter] How to Create Link Button 이번 포스팅에서는 Flutter에서 Link Button을 만드는 방법에 대해 살펴보겠습니다. 생각보다 어렵진 않으니 한 번 따라해 보세요. Add Packages 먼저, pubspec.yaml 파일을 열고 필요한 패키지를 추가해 줍니다. dependencies: flutter: sdk: flutter url_launcher: ^6.1.12 이제, 추가한 package를 가져옵니다. $ flutter pub get Configuration 전 iOS용으로 만들고 있어서, info.plist 파일에 다음 내용을 추가해 줬습니다. LSApplicationQueriesSchemes sms tel 다른 플랫폼을 사용하신다면 공식 페이지를 참고하셔서 설정해 주시면 되요. https://pub.dev/package.. 2023. 8. 2. [Flutter] How to use Google Fonts in Flutter 이번 포스팅에서는 Flutter 앱에서 구글 폰트를 사용하는 방법에 대해 살펴보겠습니다. Add Package pubspec.yaml 파일을 열고, google_fonts를 추가해 줍니다. dependencies: flutter: sdk: flutter google_fonts: ^5.1.0 Import Google Fonts 다음으로 구글 폰트를 사용할 파일 상단에 다음과 같이 import 해줍니다. import 'package:google_fonts/google_fonts.dart'; Setting Up for MacOS 예제를 macOS로 작성 중이라 추가로 HTTP fetching에 대한 설정이 필요합니다. macos/Runner/DebugProfile.entitlements 파일을 열어 다음 ke.. 2023. 6. 30. [Flutter] How to Handle Image in Mobile 이번에는 사진을 다루는 방법을 살펴보겠습니다. Setting Package 이미지를 쉽게 다룰 수 있도록 image_picker package를 설정하겠습니다. pubspec.yaml 파일을 열어 설정을 해 줍니다. dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 image_picker: ^0.8.7+4 Setting iOS 다음으로 iOS 설정을 해주겠습니다. 현재, iOS 11 버전 이상에서만 동작합니다. ios/Runner/Info.plist 파일을 열어 다음의 내용을 추가해 줍니다. ... NSPhotoLibraryUsageDescription 사진첩 권한이 필요합니다. NSCameraUsageDescription 카메라 권한이 필요합니다.. 2023. 4. 27. [Flutter] How to Send Notifications on Flutter: Using flutter_local_notification 이번에는 iOS와 Android에서 알림을 보내는 방법에 대해 살펴보겠습니다. 이를 위해 flutter_local_notification이라는 플러그인을 사용하겠습니다. Creating Project 해당 내용에만 집중하기 위해, 기본 example을 사용하겠습니다. $ flutter create example Setting Plugin pubspec.yaml에 다음과 같이 사용할 플러그인을 명시해 줍니다. dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 flutter_local_notifications: ^13.0.0 이제 프로젝트에 적용을 해줍니다. $ flutter pub get Setting iOS ios/Runner/AppDelegate.. 2023. 4. 21. [Flutter] How to Add an Icon into a Flutter App 이번 포스팅에서는 Flutter 앱에 아이콘을 넣는 방법에 대해 살펴보겠습니다. App을 store에 배포하거나, 배포된 앱을 설치했을 때 보이는 아이콘입니다. ^^ Prerequisite 먼저, 원하는 아이콘 파일을 준비해 주세요. 프로젝트에 asset 폴더를 만들고, 이 아이콘을 넣어줍니다. Add Icon using Plugin 다음으로, 이 작업을 편하게 해줄 plugin을 설정해 줍니다. https://pub.dev/packages/flutter_launcher_icons 자세한 내용은 링크를 참고해주세요. Plugin 설정을 위해 pubspec.yaml 파일을 수정합니다. dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 f.. 2023. 4. 18. [Flutter] How to Deploy Flutter App to the Google Store 이번 포스팅에서는 Flutter로 만든 앱을 구글 스토어에 배포하는 방법에 대해 살펴보겠습니다. Setting the Bundle ID 직접 변경하는 방법도 있긴 하지만, 플러그인의 도움을 받아보겠습니다. pubspec.yaml 파일에 플러그인을 명시해줍니다. dev_dependencies: flutter_test: sdk: flutter ... change_app_package_name: 1.1.0 프로젝트에 반영해 줍니다. $ flutter pub get 이제 다음의 명령어를 이용하여 Bundle ID를 변경해 줍니다. $ flutter pub run change_app_package_name:main {BUNDLE ID} Setting the App Version and Build Number 다음.. 2023. 4. 18. [Flutter] How to Embed Ads into Flutter App 이번에는 Flutter app에 광고를 다는 방법에 대해 살펴보겠습니다. Login/Logup to AdMob 가장 많이 사용하는 Google의 AdMob으로 넣어보겠습니다. 먼저 회원 가입을 해주세요. https://apps.admob.com 잘 완료되었으면 요런 화면을 보실 수 있을 거에요. Configure pubspec.yaml 이제 광고를 위한 plugin을 설정해 줍니다. dependencies: flutter: sdk: flutter google_mobile_ads: 2.3.0 이제 다음의 명령어로 프로젝트에 적용을 합니다. $ flutter pub get Register App to AdMob AdMob 사이트에서 앱 추가를 선택합니다. 그러면 다음과 같은 화면이 나옵니다. 플랫폼을 따로 .. 2023. 4. 16. [Flutter] How to Deploy a Flutter App to an iPhone 이전 포스팅에서 flutter 개발 환경을 만드는 방법에 대해 설명했습니다. 요번에는 이렇게 만든 flutter app을 실제 iOS 기기에서 구동하는 방법에 대해 살펴보겠습니다. Prerequisite xcode 같은 것은 당연히 설치되어 있다고 가정하겠습니다. 그래야 개발을 하셨을테니 ^^;; 이제 아이폰의 개발자 모드를 활성화 해야합니다. 설정 > 개인정보 보호 및 보안 > 개발자 모드 메뉴에서 개발자 모드를 켜주세요. 재부팅이 된 후, 완료가 될거에요. Open Project ios/Runner.xcworkspace를 xcode에서 열어줍니다. Setting Project 위와 같이 각자 signing 정보를 넣어 줍니다. Run Application 화면 상단의 메뉴에서 시뮬레이터 대신 자신의 .. 2023. 4. 11. [Flutter] Desktop Application using Flutter Flutter는 이제 "Build apps for any screen"을 표방하며 멀티 플랫폼 framework이 되었습니다. 기존의 mobile을 넘어 web, desktop은 물론 embedded까지 가능합니다. Install Flutter 기본적으로는 공식 홈페이지를 통하여 설치를 하시면 됩니다. https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev 만약 패키지 매니저를 사용하신다면, 더욱 편하게 설치하실 수도 있어요. 전 MAC.. 2023. 1. 25. 이전 1 2 다음
