목차  인덕 부동산 앱 시연 영상 https://youtu.be/mZ7mjVLEZV8   주요 기능   디렉터리 구조    소스코드 main.dartimport 'dart:ui';import 'package:firebase_core/firebase_core.dart';import 'package:firebase_crashlytics/firebase_crashlytics.dart';import 'package:flutter/material.dart';import '../firebase_options.dart';import 'intro/intro_page.dart';void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase...

Flutter 14주차 (2) - 파이어베이스 인증하기 이번 주차에서는 파이어베이스의 인증 기능을 이용해 이메일과 비밀번호로 회원가입하고 로그인하는 앱을 만들어 볼 예정이다. 목차  파이어베이스 이메일 비밀번호 인증 설정하기 파이어베이스의 이메일 비밀번호 인증 기능을 사용하기 위해선 파이어베이스 콘솔에서 해당 기능을 활성화해줘야 한다. 먼저 파이어베이스 콘솔에 접속하여 저번시간에 만든 프로젝트를 클릭하자.그리고 왼쪽 빌드 목록에서 Authentication을 클릭하자.  인증 방법 중에서 이메일/비밀번호를 클릭하고 사용 설정을 활성화하고 저장을 누르자.  템플릿 탭으로 넘어와서 이메일 주소 인증으로 들어가자.  아래 템플릿 언어를 한국어로 바꾸자.     패키지 등록하기 pubspec.yaml 파일을 ..

Flutter 14주차 (1) - 이미지 피커(image_picker) 활용하기 이번 주차에서는 이미지 피커를 활용하여 갤러리나 카메라와 연동하는 앱을 만들어 볼 예정이다.갤러리에서 선택하거나 카메라로 찍은 사진을 화면에 출력하는 간단한 앱이다. 목차  image_picker 패키지 등록하기 이미지 피커를 사용하기 위해선 다음처럼 이미지 피커 패키지를 pubspec.yaml 파일의 dependencies 항목에 등록해야 한다. pub.dev 사이트에 들어가서 image_picker를 검색한 후 dependencies 항목에 등록하자.   Flutter 패키지는 버전 업데이트가 자주 일어나는데 이전 버전이면 다른 패키지와 충돌이 발생할 수도 있으므로 가능하면 pub.dev에서 검색해서 최신 버전의 패키지를..

Flutter 12주차 - 플러터 앱과 파이어베이스 연동하기 (MacOS) 이번 주차에서는 파이어베이스를 사용하여 실습을 진행하기 위해 플러터 앱과 파이어베이스를 연동하는 방법에 대해 알아볼 예정이다. 목차  파이어베이스 프로젝트 만들기 Flutter 앱에 Firebase를 추가하는 방법은 아래 공식문서에서 자세히 안내하고 있다.https://firebase.google.com/docs/flutter/setup?hl=ko&platform=android 위 공식문서를 참고하여 차근차근 연동해보자. 먼저 Firebase Console에 들어가보면 아래와 같이 기본 페이지가 나온다.필자는 이전에 프로젝트를 만들어 놓은 적이 있어 다른 프로젝트가 보이는데 만약 이번이 처음이라면 프로젝트 만들기만 보일 것이다. ..

Flutter 11주차 - Youtube API를 이용한 동영상 플레이어 앱 이번 주차에서는 간단하게 Youtube API를 이용한 동영상 플레이어 앱을 만들어 볼 예정이다. 목차  구글 API 키 얻기 유튜브 API를 사용하기 위해선 구글의 API 키를 발급받아 사용해야 한다. 아래 링크로 들어가 본인의 구글 아이디로 로그인하면 다음과 같은 화면이 나온다.https://console.cloud.google.com/  일단 처음 구글 콘솔에 접속하면 아무런 프로젝트가 선택되어 있지 않을텐데, 필자는 이미 이전에 구글 API를 사용한 적이 있어 프로젝트가 자동으로 선택되어 있다. 좌측에 프로젝트 선택창을 클릭하여 프로젝트를 하나 추가해보자.  프로젝트 이름은 YoutubeAPI로 지었다.(테스트용이기 때문..

Flutter 10주차 - dio 패키지를 이용해 reqres.in 사이트에서 API 정보 가져오기 이번 주차에서는 reqres.in 사이트에서 제공하는 API를 사용해서 유저 정보 리스트를 구현할 예정이다. 목차  dio 패키지 가져오기 이번 실습에서는 HTTP 요청을 처리할 수 있도록 하는 dio 패키지를 사용해서 구현할 예정이므로 pub.dev 에 들어가 dio 패키지를 설치하자.  설치 방법대로 dependencies 에 dio를 추가한 후  Pub get를 눌러 패키지를 설치하자.    reqres.in 유저 리스트 API 확인하기 https://reqres.in/api-docs/#/ 사이트에 들어가보면 reqres.in에서 제공하는 API들의 문서를 볼 수 있다.  우리가 사용할 유저 리스트 ..

Flutter 9주차 - 카카오 API를 이용해 도서 정보 가져오기 이번 주차에서는 카카오 API를 이용해 도서 정보를 가져오는 실습을 진행할 예정이다.주요 기능은 다음과 같다. 입력 : 사용자가 원하는 검색어를 입력할 수 있는 TextField 제공.스크롤 감지 : 사용자가 리스트를 아래로 스크롤 할 때 데이터 로드.API 호출 : 카카오의 도서 정보 API로 데이터를 가져옴.결과 표시 : 가져온 데이터를 리스트 형태로 표시. 목차  http 패키지 가져오기 먼저 HTTP 통신을 통해 카카오 API에 요청할 예정이므로 HTTP 패키지가 필요하다. pub.dev 로 이동하여 패키지 설치를 진행하자.    예시대로 dependencies에 http 패키지를 추가한 후, 우측 상단에 Pub get를 눌러 패..

https://youtu.be/Pj5whnY7ynI  소스코드 main.dartimport 'package:flutter/material.dart';import 'calculator_button.dart'; // 버튼 위젯을 정의한 파일 importimport 'calculator_logic.dart'; // 계산 로직을 정의한 파일 importvoid main() { runApp(const MyApp());}// MyApp 클래스는 앱의 최상위 위젯으로, 전체 앱 구조를 정의class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return co..

Flutter 7주차 (3) - 아이콘과 아이콘 버튼 활용하기  목차  패키지 등록하기 먼저 폰트 어섬에서 제공하는 아이콘을 사용하기 위해서 pubspec.yaml 파일에 FontAwesomeIcons 패키지를 등록해야 한다.아래와 같이 font_awesome_flutter 패키지를 dependencies에 작성 후 Pub get을 눌러 설치하자.    다트 파일 작성하기 ilb 폴더 아래에 ch9_4 라는 디렉터리를 만들고 안에 test.dart 파일을 만들고 아래 코드를 작성하자. import 'package:flutter/material.dart';import 'package:font_awesome_flutter/font_awesome_flutter.dart';void main() { runApp..

Flutter 7주차 (2) - http 패키지 이용하기  목차  http 패키지 설치하기 http 패키지를 사용한 통신 연습을 진행하기 위해 패키지 설치를 진행해보자. 먼저, pub.dev 로 이동하여 http를 검색해보자.실습에서 사용할 패키지는 맨 위에 검색된 http 패키지이다. 해당 패키지 이름을 클릭하여 들어가자.   Using을 읽어보면 패키지를 import 할 때 as를 사용해서 http로 줄여서 사용하는 것을 권장하고 있다.    이제 Installing 탭으로 이동해서 설명처럼 pubspec.yaml 파일에 dependencies안에 http를 추가한 후 pub get을 눌러 설치하자.    다트 파일 작성하기 이제 http 패키지를 사용한 다트 파일을 아래와 같이 작성해보자. lib ..