Flutter
-
Flutter + Spring Boot 가족, 모임 서비스 구현하기 3.2 (Feat. UI 구현)Flutter 2023. 10. 26. 12:04
이전 글에서 이어집니다!... 이전 글 보러가기 Flutter + Spring Boot 가족, 모임 서비스 구현하기 3 (Feat. UI 구현) 가족, 모임 서비스 구현 중 Flutter로 UI 구성 시 있었던 시행착오들을 글로 작성해보려고 합니다. 구현 중 알게 된 점들이나, 트러블슈팅 과정들이 섞여 있어 글이 매끄럽지 않을 수 있다는 점 양 beomseok37.tistory.com 1. ChangeNotifierProvider list ChangeNotifier로 정의한 전역 상태값을 사용할 경우 ChangeNotifierProvider로 상태값을 사용할 수 있도록 주입해주어야 합니다. 하나의 상태값을 넣어줄 경우 다음과 같이 진행하면 됩니다. runApp( ChangeNotifierProvider(..
-
Flutter + Spring Boot 가족, 모임 서비스 구현하기 3.1 (Feat. UI 구현)Flutter 2023. 10. 24. 11:16
가족, 모임 서비스 구현 중 Flutter로 UI 구성 시 있었던 시행착오들을 글로 작성해보려고 합니다. 구현 중 알게 된 점들이나, 트러블슈팅 과정들이 섞여 있어 글이 매끄럽지 않을 수 있다는 점 양해 부탁드립니다.🥲 1. Flutter 통신 Flutter에서 통신을 위해서는 http 패키지를 추가해줘야 합니다. pubspec.yaml dependencies: ... http: ^1.1.0 http 패키지를 pubspec.yaml에 추가해줍니다. 만약 Api 통신을 하게 된다면 반환받을 데이터가 있을 경우 json을 다시 객체 형태로 바꿔주는 작업이 필요할 수 있습니다. (Map 자료구조를 사용한다면 이 작업이 필요없을 수 있습니다.) 저와 같은 경우 Api 요청 시 반환 받을 값들을 모두 dto로 선..
-
Flutter + Spring Boot 가족, 모임 서비스 구현하기 1 (Feat. 카카오 로그인)Flutter 2023. 8. 11. 00:21
현재 개발하고자 하는 서비스에서 로그인한 유저가 새로운 가족이나 모임을 만들거나 기존의 가족이나 모임에 참여할 수 있도록 하는 기능을 만들게 되었습니다. 로그인과 같은 경우 Flutter 3.0 버전에 카카오 SDK가 정식으로 지원을 해준다고 해서 카카오 Flutter SDK를 활용했습니다. 새로운 모임,가족을 만드는 로직과 DB 접근을 위해 Spring Boot로 서버를 구축했습니다. 카카오 로그인 구현 카카오 로그인은 kakao developers 페이지에 자세한 설명이 있습니다. 이를 따라한다면 충분히 구현이 가능할 것 같습니다. https://developers.kakao.com/docs/latest/ko/getting-started/sdk-flutter Kakao Developers 카카오 AP..
-
Google Codelabs Flutter 앱 만들기 실습 2Flutter 2023. 8. 3. 12:16
코드랩스 플러터앱 만들기 실습을 이어가보도록 하겠습니다. 6. 좋아요 버튼 추가 현재 앱 상태는 단어 쌍이 다음 것으로 교체되면 없어지는 형태입니다. 한 번 지나간 단어도 다시 볼 수 있도록 하기 위해 favorite 버튼을 제작해보도록 하겠습니다. 리스트 선언 상태값에 favorites 리스트를 선언해줍니다. 또한, favorites 리스트에 단어를 넣거나 빼줄 수 있는 로직을 추가해줍니다. class MyAppState extends ChangeNotifier { ... var favorites = []; void toggleFavorites(){ if(favorites.contains(pairWords)){ favorites.remove(pairWords); } else { favorites.add..
-
Google Codelabs Flutter 앱 만들기 실습 1Flutter 2023. 8. 2. 22:23
현재 플러터를 활용한 크로스 플랫폼 앱을 만들기 위해 플러터 앱 만드는 방법에 대해 많이 알아보고 있는 와중, 구글에서 제공해주는 코드랩스에 대해 알게 되었습니다. 코드랩스는 여러가지 실습 자료들을 상세히 알려주는 플랫폼입니다. 여기서 플러터 앱 만들기 튜토리얼을 따라해보면서 플러터 앱 만들 때 필요한 것들을 한 번 알아보도록 하겠습니다. 1. 프로젝트 소개 구글 코드랩스에서 소개하는 이번 프로젝트는 두 개의 영어 단어를 합쳐 새로운 영어 단어를 만들어주어 표시해주기도 하고, 이 단어들 중 마음에 드는 단어들을 저장하고 저장된 단어들을 따로 보여주는 간단한 프로젝트를 만드는 프로젝트입니다. 2. Flutter 환경 설정 코드랩스에서는 VSCode를 활용하여 플러터앱을 만듭니다. 저와 같은 경우 이미 안드..
-
Dart 문법 정리Flutter 2023. 7. 28. 15:40
1. 변수 선언 // 정수 int variable1 = 10; // 소수 double variable2 = 2.5; // 참/거짓 bool variable3 = true, false; // 문자열 String varibale4 = "문자열"; // 타입 자동 유추 var variable5 = "var"; dynamic variable6 = "dynamic"; dynamic과 var의 차이 var은 선언 시 지정한 타입으로 고정되어 다른 타입을 할당 할 수 없습니다. dynamic은 선언 시 지정한 타입과 다른 타입으로 할당 할 수 있습니다. dynamic variable1 = "dynamic"; var variable2 = "var"; variable1 = 10 variable2 = 10 // 오류 nu..
-
Flutter 기본 위젯, 레이아웃 설정 방법Flutter 2023. 7. 26. 20:27
오늘은 Flutter 프로젝트를 새로 만들 때 생성되는 기본 구조와 기본 위젯, 레이아웃 잡는 법에 대해 살펴보도록 하겠습니다. 프로젝트 구조 android, ios, web 디렉토리 : android, ios, web에 필요한 기능들이 들어 있습니다. lib : 플러터 다트 소스 파일들을 담는 디렉토리입니다. 프로젝트 시작하면 main.dart파일이 생성되어 있습니다. test : 테스트 소스 코드를 위한 디렉토리입니다. pubspec.yaml : 앱 이름, 의존성, 환경 변수, 이미지 경로 등 기본 정보들을 담고 있는 파일입니다. main.dart & main, runApp main.dart 파일은 플러터 앱의 시작점이 되는 파일입니다. 어플리케이션 구동 시 맨 처음 호출됩니다. void main..
-
Flutter 설치 (Mac M1 Pro)Flutter 2023. 7. 25. 22:52
크로스 플랫폼 앱을 만들어보기 위해 플러터를 사용해보기로 했습니다. 리액트 네이티브와 플러터 중 어떤 것을 사용할 지 고민을 많이 했는데, 그래도 안 써본 프레임워크를 사용해보는 것이 더 좋을 것 같다는 생각이 들어 플러터를 공부해보도록 하겠습니다. 1. 플러터 설치 플러터 공식 사이트에 접속하여 자신의 OS 버전에 맞는 플러터를 설치하면 됩니다. zip 파일의 설치가 끝나면 압축을 해제해주고 압축 해제된 폴더를 원하는 위치에 두시면 됩니다. 2. 환경 변수 추가 터미널에서 아래의 명령어를 통해 환경변수 입력창을 띄워줍니다. # ~/.zshenv 없다면 아래 명령어 선행 touch ~/.zshenv # ~/.zshenv이 생성 됐다면 아래 명령어 실행 open ~/.zshenv 환경 변수 입력 창이 띄어..