mynote6676 개발자 노트

모델 만들기 학습 목표 모델 클래스의 역활을 이해한다.JSON을 Dart 객체로 변환하는 방법을 배운다.1. 모델이란?모델은 데이터의 구조를 정의하는 클래스입니다. 2. User 모델만들기data/models/user.dart 파일을 생성합니다.// User 모델 클래스 설계// API 문서 기준으로 설계해 볼 수 있다.class User { int? id; // API 에서 누락될 수 있다. String? username; String? imgUrl; // 프로필은 선택사항 String? accessToken; User({ this.id, this.username, this.imgUrl, this.accessToken, }); // json to Dart 변환 생성자 ..

디자인 시안 확인 더보기 이미지 파일 프로젝트 구조 확인더보기 주소 수정 my_http.dart 파일 확인import 'package:dio/dio.dart';import 'package:flutter_secure_storage/flutter_secure_storage.dart';/// todo - 개인 로컬 컴퓨터 주소로 수정하세요final baseUrl = "http://192.xxx.x.xxx:8080";//로그인 되면, dio에 jwt 추가하기//dio.options.headers['Authorization'] = 'Bearer $_accessToken';final dio = Dio( BaseOptions( baseUrl: baseUrl, // 내 IP 입력 contentTy..

Monolithic(모노리스) 구조의 특징하나의 코드 파일에 UI,비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture 또는 간단히 Monolith라고 부릅니다. 먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 테이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다. | 임시 코드더보기import 'package:flutter/material.dart';/** * 모노리스 구조로 코드를 작성해 보자. */void main() => runApp(TodoApp());class..

import 'package:flutter/material.dart';import 'package:shared_preferences/shared_preferences.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'SharedPreferences 예제', debugShowCheckedModeBanner: false, home: CountStorage(), ); }}class CountS..

2.1. Google Maps API 키 발급Google Cloud Console에서 API 키를 발급받는 과정은 다음과 같습니다.1. Google Cloud Console(https://console.cloud.google.com/)에 접속하여 로그인합니다.2. 새 프로젝트를 생성하고, Maps SDK for Android와 Maps SDK for iOs를 활성화합니다.3. 사용자 인증 정보 메뉴에서 API 키를 생성하고 복사해둡니다. 1.Google Maps API - google_maps_flutter 패키지: 이 패키지는 Flutter에서 Google Maps Platform을 편리하게 사용할 수 있도록 도와주는'다리(Bridge)' 역활을 합니다.- 작동 방식: 이 패키지는 Dart 코드를..

사전 준비더보기| AGP 이유 해결 distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip plugins { id "dev.flutter.flutter-plugin-loader" version "1.0.0" id "com.android.application" version "8.5.0" apply false id "org.jetbrains.kotlin.android" version "1.9.10" apply false} |의존성 추가 image_picker: ^1.1.2 gal: ^2.3.2 http: ^1.5.0 import 'package:flutter/material.dart';/// 앱에서 ..

| 작업중 코드import 'dart:io';import 'package:flutter/material.dart';import 'package:gal/gal.dart';import 'package:image_picker/image_picker.dart';void main() { runApp(const MyApp());}class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState();}class _MyAppState extends State { File? _selectedImage; String statusMessage = "사진을 선택하거나 촬영하세요"; boo..

|시안 코드 구성 더보기import 'package:flutter/material.dart';import 'package:gal/gal.dart';import 'package:image_picker/image_picker.dart';void main() { runApp(const MyApp());}class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState();}class _MyAppState extends State { String statusMessage = "사진 저장하기"; @override Widget build(BuildContext context)..

카메라 기능 (어려움)(크로스 플랫폼) (추상객체) 사진을 JOSN형식으로 변형하기 위해 문자열로 바꿈 이것을 인코딩이라 한다. -----------안드로이드(카메라) ----------- iOS(카메라) 카메라를 다루기위해 두가지 라이브러리 ( pub.dev 에서 검색해서 가져오기)더보기1.imaga_picker 카메라 갤러리에서 이미지를 선택할 수 있게 하는 라이브러리image_picker: ^1.1.2import 'package:image_picker/image_picker.dart'; ===================================================2. gal반대로 저장해주는것gal: ^2.3.2import 'package:gal/gal.dart';권한 설정 ---> ..

4. Key를 사용한 문제 해결키를 사용하여 상태 보존플러터는 프레임을 빌드할 때 각 요소와 해당 위젯을 확인하여 해당 요소를 재사용할 수 있는지 판단합니다.목록의 경우, 플러터는 자식 요소 내에서 일치하는 위젯 유형과 키를 확인합니다. key 적용 코드class _MyHomePageState extends State { final List containers = [ const CustomContainer("1", key: ValueKey(1)), // Key 추가 const CustomContainer("2", key: ValueKey(2)), // Key 추가 const CustomContainer("3", key: ValueKey(3)), // Key 추가 ]; Widge..