Flutter 썸네일형 리스트형 [Flutter] Firebase의 Realtime Database 활용 app 만들기 2/3 VS code 에서 추가 작업앞선 포스팅에서 필요한 설치를 했으니, 이제 코드 부분에 수정이 필요합니다.2025.08.17 - [Flutter] - [Flutter] Firebase의 Realtime Database 활용 app 만들기 1/2 [Flutter] Firebase의 Realtime Database 활용 app 만들기 1/2Multi-Platform Support with Single SourceFlutter는 Windows, Linux, Mac, Android, iOS, Web 등 다양한 플랫폼에서 실행 가능한 앱을 하나의 소스코드로 만들 수 있게 해줍니다. 예를 들어 간단한 메모 앱을 생각해봅시joeyhwang.tistory.com main.dartmain.dart 파일에서는 아래 3종의 .. 더보기 [Flutter] Firebase의 Realtime Database 활용 app 만들기 1/3 Multi-Platform Support with Single SourceFlutter는 Windows, Linux, Mac, Android, iOS, Web 등 다양한 플랫폼에서 실행 가능한 앱을 하나의 소스코드로 만들 수 있게 해줍니다. 예를 들어 간단한 메모 앱을 생각해봅시다. 스마트폰에서 작성한 메모를 윈도우 앱에서도 실시간으로 확인하고 수정할 수 있다면 굉장히 편리할 것입니다. 물론 메모 데이터를 로컬 데이터베이스(Local DB)로 구현할 수도 있습니다. 하지만 이 경우 다른 디바이스에서 앱을 열면 데이터를 별도의 파일로 export / import해야 하므로 여러 기기에서 동시에 사용하는 데는 한계가 있습니다. 특히 데이터가 수시로 변하는 메모 앱 같은 경우에는 불편함이 커지죠. 이럴 때는 .. 더보기 Creating a database using classes in Flutter/Dart When developing an app, there are times when a database is needed. Let's imagine creating an app that handles the following types of data.Product IDProduct NameProduct ColorsProduct Price401ABCRed, Green$1,000202DEFBlue, Black$2,000105GHKGreen, Indigo$1,400231JKLBlack$1,100 We have 4 columns and 5 rows, with a header row containing item names.I'd like to transfer the table into Dart code. Data C.. 더보기 [Flutter] Lotto 번호 생성기 Lotto 맞았으면하는 생각에 몇 주간 Lotto를 구매하려다가... 기존의 담청 History를 좀 이용할 수 없을까 고민을 좀 해봤습니다. 이래저래 고민을 해봤는데... ^^ 사실 이전 Lotto의 번호와 다음 Lotto의 번호에 관련성이 없는 독립실행이라 사실 History를 이용하는 건 의미가 없긴하겠더라구요. 일단 3가지를 적용해서 Random하게 번호를 뽑도록 구현해봤습니다. 첫번째, 당첨 번호는 중복되지않음 사실 중복될 수도 있겠지만, ^^ 가능성이 희박하다는 가정하에, 기존 당첨번호는 제외하고 번호를 뽑습니다. 두번째, 기존 당첨번호에서 많이 등장한 숫자가 더 확률이 높도록 조정 얘기한데로 독립실행이라 사실 큰 의미는 없어보입니다만, 확실히 자주 나오는 숫자는 자주 나오는 경향이 있으니 반.. 더보기 두번째 Flutter App - 환율 계산기 만들기 - 전체 코드 및 실행 파일 이전 포스팅에서 하나KEB에서 제공하는 무료 API를 이용해서 환율 가져오기를 구현했었습니다. 2022.09.20 - [Flutter] - [Flutter 코딩] 두번째 Flutter App 환율 계산기 - 2. 환율 가져오기 App UI를 정리하는 도중에 확인해보니, 해당 사이트는 서비스가 이미 끝나버렸네요. 구글링을 하다보니, 환율 정보를 무료로 제공받을 수 있는 API를 제공하는 다른 방법이 있어서 다시 정리합니다. 아래 사이트에서 무료 환율 정보를 제공합니다. (기부 가능합니다.) 실제 받아보니 암호화폐까지도 환율 정보를 제공하고 있네요. https://github.com/fawazahmed0/currency-api GitHub - fawazahmed0/currency-api: Free Curre.. 더보기 두번째 Flutter App - 환율 계산기 만들기 2 3. Main UI 구현 기본적인 환율 정보 가져오기까지는 이전 포스팅에서 완료했으니, 이제 화면을 꾸며보겠습니다. 우선, 기본적으로 만들어져있는 Main UI를 살짝 수정합니다. 간단히는 기본으로 만들어지는 MyHomePage 와 _MyHomePageState class들을 삭제하고, Scaffold를 새롭게 꾸며주려고합니다. 아래와 같이 뒤쪽 코드를 전부 지워주고, MyApp class만 남깁니다. import 'package:exchange_rate_calculator/exchange_rate.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessW.. 더보기 두번째 Flutter App - 환율 계산기 만들기 1 첫번째 Flutter App은 VS code가 자동 생성해주었습니다. 이제 직접 필요한 App을 제작해보겠습니다. 두번째 Flutter App은 환율 계산기를 만들어보려고합니다. ① App이 실행될 때, ② 사용자가 원할 때, 웹상에서 환율을 가져와서 업데이트하고, 금액을 입력하면 환율이 자동으로 변환되도록 해보겠습니다. 아래와 같은 순서로 해보겠습니다. 1. 웹에서 정보 읽어오기 2. 환율 가져오기 3. Main UI 구현 4. 설정 UI 구현 5. 환율 정보 읽기가 완료되었을 때 UI 업데이트 구현 시작해보겠습니다. 1. 웹에서 정보 읽어오기 http protocol을 사용해서 웹페이지를 읽을 수 있는 class를 제작해보겠습니다. 웹크롤링을 좀 더 전문적으로 하다보면, http contents를 좀.. 더보기 샘플 Flutter App build/배포 하기 + Code 분석해보기 샘플 Flutter App build/배포 하기 PC / Android / Web에서 실행이 가능하다는 건 알았는데.... 실제 배포(release)는 어떻게 해야할까요? 매번 VS code를 실행하고 앱을 실행할 수는 없으니까요. 각 플랫폼별로 실행파일을 만드는 과정을 "Build"라고합니다. Build를 하면 플랫폼 별로 실행가능한 형태의 결과물이나 설치 파일이 나오고, 해당 플랫폼에서 그 파일들을 실행하면됩니다. VS code 상에서 Ctrl + ` (ESC 키 아래에 있는 숫자 1 왼쪽의 키) 를 입력해서 terminal을 열고, 아래의 command를 입력해줍니다. - Windows용 build : flutter build windows - Android용 build : flutter build.. 더보기 이전 1 2 다음
