문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.
ref : Flutter & Dart - The Complete Guide [2023 Edition] 23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다. Flutter 프로젝트 생성 터미널의 원하는 경로에서 다음을 입력 flutter create [프로젝트이름] 또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서 flutter new project 를 선택해도 됨 Understanding Types 다트는 type-safe 언어이다. 다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다. 여기서 타입 안전성이란? 프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념 Da..
버튼 위젯을 따로 파일로 만들어서 여러 파일들에서 쓰던 중에 Error: The argument type 'Function?' can't be assigned to the parameter type 'void Function()?' 오류가 났다. onPressed 부분이 문제가 되는 것 같았다. 이렇게 bar_button 이라는 파일이 있고 다른 파일에서 이렇게 응용하던 중이었다. 해결 문제를 해결하는데에 이 영상이 도움이 되었다. https://www.youtube.com/watch?v=YanWDEuISRI&ab_channel=IntelliLogics 아니면 오류에서 제안하는 대로 onPressed 변수 앞에 void Function()? 을 붙이면 오류가 해결된다. 코드는 아래와 같다. import ..
이부분 때문에 나던 오류를 드디어 해결했다! 파티를 신청/취소 하는 기능을 구현하는데 자꾸 가져오는 party의 데이터가 null 이라고 하는 문제였었다. 팀원이 내 실수를 잡아줬는데 내가 firebase에 파티 데이터를 생성해서 넣을때 id 값을 랜덤으로 생성해서 넣게 코드를 썼기 때문이었다.. 이렇게 되면 데이터가 저장될 때 firebase 측에서 자동으로 생성해주는 id와 내가 코드로 구현해서 랜덤으로 생성되는 id가 다르게 된다. 그래서 party의 id가 달라서 생기는 문제였다. party를 생성하는 부분은 이 영상을 조금 참고했다. https://www.youtube.com/watch?v=ErP_xomHKTw&ab_channel=JohannesMilke 먼저 파티를 생성하는 부분부터 수정해야했..
문제 오류 메세지 The name 'User' is defined in the libraries 'package:firebase_auth/firebase_auth.dart' and 'package:snackparty/model/user.dart'. Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports. User를 가져오는 과정에서 오류가 발생했다. 'package:firebase_auth/firebase_auth.dart' 에도 User가 있고 'package:snackparty/model/user.dart'. 에도 User가 있어서 꼬인 듯 했다. 해결 내가 가져오려..
폼을 입력하고, 그 폼에 입력된 데이터들을 firebase 에 저장하는 코드를 구현해봤다. 역시 직접 해보는 건 또 다르구나 유독 느낀 파트였다. import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; import 'package:snackparty/model/party.dart'; class AddPartyScreen extends StatefulWidget { const AddPartyScreen({K..
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:snackparty/screen/add_party_screen.dart'; import 'package:snackparty/screen/party_screen.dart'; import 'package:snackparty/widget/add_party_button.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:snackparty/model/party.dart'; final firestore = FirebaseFirestore.instance; ..
https://bebesoft.tistory.com/11 flutter :: 플러터에서 json 사용하기 - 기본편 | json data in flutter 안녕하세요 개발자 베베입니다. 이번 포스팅에서는 플러터에서 json 데이터를 사용하는 방법에 대해서 알아보도록 하겠습니다. 1. 자료형에 대한 이해 2. json 스트링을 Map 자료형으로 변환 3. Map bebesoft.tistory.com ref 정리하자면 dart 에서 json을 사용할 때에는 순서에 맞게 변형한다 json string ---- map ---- object json 스트링 json 자료형 json 객체 객체를 생성하려면 json 데이터와 매칭이되는 객체를 정의해줘야한다. class User{ String name; int ag..
문제 Undefined class 'Firestore'. 오류 해결 Change the name from 'Firestore' to 'FirebaseFirestore'. FirebaseFirestore firestore = FirebaseFirestore.instance;
문제 하단에 '신청 하기' 버튼을 (스크롤하더라도) 고정시키고 싶은데 화면이 깨지고 원하는대로 되지 않았다. import 'package:flutter/material.dart'; class PartyScreen extends StatefulWidget { const PartyScreen({Key? key}) : super(key: key); @override State createState() => _PartyScreenState(); } class _PartyScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('파티명'), ), body: ..
문제 입력 폼과 생성하기 버튼 화면을 구현해야하는데 입력폼은 위로 배치하고 생성하기 버튼은 바닥으로 내리고 싶은 상황이었다. (이것들은 Column으로 구성하고 있었다) 구글링을 해보니 Spacer() 라는 게 있어서 사용해봤다. import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; class AddPartyScreen extends StatefulWidget { const AddPartyScreen({Key? key}) : super(key: key); @override State createSta..
문제 개발하다가 제대로 버튼 위젯을 넣은 것 같은데 화면이 밀리는 현상이 나타났다. 버튼 위젯에 문제가 있나 해서 봤는데 너무 Scaffold를 마구잡이로 쓰던 버릇때문이었다. import 'package:flutter/material.dart'; import 'package:snack_party/screen/add_party_screen.dart'; class AddPartyButton extends StatefulWidget { const AddPartyButton({Key? key}) : super(key: key); @override State createState() => _AddPartyButtonState(); } class _AddPartyButtonState extends State { ..
ClipRect 는 위젯의 모양을 강제로 직사각형으로 자르는 클래스 이다. 찾아보니 직사각형이 아니라 다른 모양으로도 자를 수 있는게 여러가지 있었다. CustomClipper, for information about creating custom clips. ClipRRect, for a clip with rounded corners. ClipOval, for an elliptical clip. ClipPath, for an arbitrarily shaped clip. 아래는 사용 예시 Scaffold( body: Container( child: SafeArea( child: ListView( children: [ Stack( children: [ Container( width: double.maxFin..
https://youtu.be/lkF0TQJO0bA 화면 UI 를 구성하다가 Scaffold 안에 body를 SafeArea 로 감싸주는 코드를 보고 뭔지 궁금해졌다. 기기별로 화면의 padding 을 알아서 만들어준다고한다. 앞으로 자주 쓸 수 있을 것 같다. 아래는 예시 return Scaffold( body: Container( child: SafeArea( child: ListView( children: [ Stack( children: [ Container( width: double.maxFinite, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/' + widget.movie.poster), fit: B..
화면 크기를 벗어나게 ui를 작성하면 이런 오류가 뜬다. 일단 Container의 높이를 50에서 60으로 높여줬다. height: 60, 근데 이번에는 라벨이 한줄을 넘어가버렸다. TabBar 를 사용할 때 label 에 대해서 조절할 수 있는 속성이 있을 것 같아 찾아봤다. https://stackoverflow.com/questions/72488870/tabbar-text-faded TabBar text faded I’m facing the next problem, my Tab's text was fading out long and you couldn't see the last letters. Widget _tabBar() { return TabBar( onTap: (tabIndex) { setSt..
자꾸 변수 선언하는데 빨간줄이 뜨면서 late 를 추가하라고 도움말이 나왔다. 추가하면서 하니까 빨간줄이 없어지긴 했는데 무슨의미인지 궁금해서 찾아봤다. Null Safety 란 개발되는 코드가 null 안전성을 보장한 상태로 개발되게 하고자 하는 개념인데 Non-Nullable 변수는 선언과 동시에 초기값을 주어야한다. 근데 어떤 경우에는 초기값을 줄 수없는 경우도 있다. 변수가 null 인 상태로 이용되는 건 아니지만 초기값이 앱이 실행되면서 결정되는 경우이다. 이럴 때 late keyword 를 사용한다. 단어 그대로 초기화 시점을 뒤로 미루겠다는 의미. 물론 선언과 동시에 초기값을 주지는 않지만, 그 변수를 이용하기 위해서는 초기값을 주어야한다. late 추가하고 편-안 ref: https://k..
body 안에 TabBarView 넣는 걸로 시작 pyshics 는 physics: NeverScrollableScrollPhysics(), 로 해서 사용자가 옆으로 넘기는 제스처를 해도 넘어가지 않게 설정 가능하고 children 안에 Container() 들 넣어줬다. class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State createState() => _MyAppState(); } class _MyAppState extends State { late TabController controller; @override Widget build(BuildContext context) { ret..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 photo_view https://pub.dev/packages/photo_view photo_view | Flutter Package Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interactive images and other stuff such as SVG. pub.dev pinch 제스처 : 손가락 두개 이용해서 사진 줌인 simple_animations https://pub.dev/packages/simple_animations simple_animations | Flutter Package Pow..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 Grid 레이아웃 만들고 싶으면 GirdView() GridView.builder() 스크롤바 생성하려면 CustomScrollView() 이때 안에는 children 대신 slivers slivers 안에는 SliverToBoxAdapter SliverGrid SliverAppBar 등 들어갈 수 있음 알림 띄우고 싶으면 flutter_local_notification 패키지 설치하고 사용 주기적으로 띄우고 싶으면 periodicallyShow zonedSchedule 등 사용 서버가 보내는 push 알림은 좀 다름. Firebase Cloud Messaging 서비스가 앱에 직접이 아닌, google play 앱으로 알림 ..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 반영구로 state 를 저장하고 싶을 때에는 폰 메모리 카드에 저장한다. 이때 shared preferences 이용 map 자료 저장할 때에는 json으로 바꿔서 저장한다. 이때 jsonEncode() 사용 json을 map으로 바꿔서 사용하고 싶으면 jsonDecode() 쓰면 된다. 페이지 이동할 때 GestureDetector 사용 페이지 전환 애니메이션 넣고싶을 때 1. CupertinoPageRoute -> 아이폰 스타일 2. PageRouteBuilder -> 커스텀 애니메이션 가능 3. Hero() 등등 방법이 있다. 부모에 있는 state 을 자식에서 쓰고 싶을 때 3 step으로 보내는거 앱이 커지면 번거로워..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 나중에 모르면 찾아보기 편하라고 키워드만 기록! 문자열 중간에 변수 넣고 싶으면 ${변수명} 스크롤 ScrollController() scroll.position.pixels maxScrollExtent userScrollDirection 위에 있는 class에서 쓴 변수를 아래 있는 class에서 쓰려면 변수 앞에 widget 붙이기 페이지 나누는 방법 1. 탭 2. Navigator (이건 덮어씌우는 방식임. 뒤로가기 잘됨)(stack 식임) MaterialPageRoute Navigator.push 3. 페이지 많으면 Routes 사용 return 생략하고 싶을 땐 => 사용하기 사진첩에서 사진 고르기 ImagePicke..
웹 말고 이제는 폰 에뮬레이터를 띄워서 프로그램을 테스트해봐야하는데 에뮬레이터가 실행은 안되고, 가상기기 지우려고 하니까 running 중이어서 못지운다고 하고.. AVD를 수동으로 아예 삭제했다가 다시 가상기기 만드는게 낫겠다 싶어서 시도해봤다. "C:\Users\username\.android\avd" 여기 들어가면 AVD 들 있는데 그냥 싹다 지워줘봤다. 안지워지는 경우에는 안드로이드 스튜디오 끄고 다시 시도! 아예 다시 지우고 가상기기도 다시 만들고 refresh 해봤다. 잘 뜬다 😭
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 TextField 옆에다가 아이콘을 넣고 싶으면 TextField( decoration: InputDecoration( icon: Icon(Icons.star), ), ), 테두리 주고 싶으면 TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.green, width: 1.0, ), ), ), ), 테두리 말고 밑줄만 주고 싶으면 TextField( decoration: InputDecoration( enabledBorder: UnderlineInputBorder(), ), ),..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 .apik .aab 로 빌드하면 앱 설치 가능 새폰으로 테스트하면 잘 되는데 유저폰에서 에러나는 이유는? -> 연락처가 하나있는데 이름이 저장 안되어 있을 수도 있고... 연락처가 아예 없을수도 있고 해결 : 변수 함수 만들때 타입지정 잘했는지, null check. 타입지정 확인하기 그냥 var 말고 더 엄격하게 변수, 함수의 타입지정을 해준다. (등호가 있으면 타입지정은 자동으로 되긴함) null check 하기 title: Text(name[i].givenName), 이런 코드 보면 에러가 뜨는데 String 타입자리에 String?을 넣으면 안된다고 뜬다 String?의 의미는 String인지 null인지 확신할 수 없..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 실제로 유저의 연락처를 꺼내보자 연락처 꺼내는 패키지를 설치해야한다. 전구 누르고 pub get 해서 설치까지 하자 main.dart 파일에도 패키지 import 까지 해주기 허락이 되었을 때에 연락처를 가져오는 코드를 짜봤다. contacts 라는 변수에 패키지 사용법에 따라 await ContactsService.getContacts(); 라고 작성해줬다. 그럼 저 contacts 에 연락처가 담기게 된다. 오래걸리는 코드이기때문에 await 을 붙이는 것이 권장된다(패키지 사용법일 뿐) 근데 실행하면 새폰이기 때문에 print(contacts) 해도 암것도 안뜬다. 그래서 위처럼 연락처들어가서 따로 추가해줬다. 연락처 버..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 사용자의 실제 연락처를 꺼내쓰는 법! 먼저 사용자한테 허락을 받아야 한다.(갤러리나 위치사용 허락받는 것처럼) 패키지를 하나 깔아야한다. permission_handler 라고 함. pubspec.yaml 파일에 가서 dependencies 에 저 코드를 추가해준다. 위에 전구가 하나 뜰텐데 누르면 pub get 이라고 뜬다 저거 누르면 알아서 설치 해준다. 더 세팅할게 필요한데 main.dart 파일로 가서 맨위에 import 'package:permission_handler/permission_handler.dart'; 코드를 추가한다. 그리고 안드로이드 폰에서 permission 을 받고 싶으니까 다음처럼 되어있는지 확인..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 개강은 했지만.. 틈날때 하나씩이라도 들으려고 한다. 배우는 건 재밌어서 다 배우고 나서 뭐 하나 만들어보고 싶기 때문..!! 가상기기 뜨는게 없어서 따로 추가작업이 필요할 것 같다. Intel CPU 쓰고 있으니까 Intel x86 Emulator 어쩌구 체크했다. 그리고 Tools 들어가서 device manager 에서 가상기기 만들기 눌렀다. pixel 5 로 골라야지 강사님이 30이나 31로 비슷하게 다운로드 받으래서 난 30으로 다운받고 이름짓고 마무리 지음. 이제 가상 안드로이드 기기 띄우려면 android emulator 눌러서 폰 들어가자 기기명 안보이면 기다리거나 refresh 누르기 가상기기 잘 떠서 이걸로..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 부모에 total 이라는 state 를 만들어보자 total == 앱에 저장된 친구수 이 total 값은 appBar 에도 확인할 수 있게 해놓았다. 그리고 다이얼로그안에 있는 완료버튼을 눌렀을 때 저 값이 +1씩 되도록 만들어보려고한다. 저 다이얼로그가 새로운 친구 등록 화면임 부모위젯에 있는 state 인 total을 자식위젯에서 변경하고 싶으면 1. 일단 부모에 수정함수를 작성 addOne이라는 수정함수를 부모위젯에 작성했다. state 를 수정하려면 setState에 넣어야했었다. 2. 자식위젯으로 보내기 왼쪽에는 작명 오른쪽에는 실제로 보내고 싶은 변수명(함수명)을 쓰면된다. 3. 그리고 자식위젯에 등록을 한다. 4...
[Flutter]ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 저번 실습과제를 한번 보자 일단 다이얼로그는 커스텀위젯화 시킨다. onPressed: (){ Navigator.pop(context);},), 그리고 창을 닫아야 하는 기능을 넣어야 하는데 Navigator.pop( ) 이거 실행하면 닫힌다. -> 현재 페이지 닫아주세요. 만약에 부모 위젯의 state 를 그 위젯 안에 있는 자식 위젯이 쓰고 싶다면 어떻게 할까? 부모에서 자식으로 state 를 전송해야한다. (보내기 -> 등록하기 -> 쓰기) 전송하는 법은 다음과 같다 그리고 등록은 아래와 같이 2곳에다가 해줘야 한다. final 로 하면 나중에 이 변수를 수정할 수 없다. 여기선 state 의 타입을 fin..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 Dialog 가 뜨도록 해보자 body: Dialog(child: Text('요기요!')) 버튼을 눌렀을 때에 Dialog 가 뜨도록 하려면 onPressed 함수 안에 써주면되는데 showDialog를 쓰면 된다. showDialog안에는 context와 builder 가 들어가야한다. 여기까지하면 버튼을 눌러도 아무것도 일어나지 않음 일단 첫 페이지는 보통 Scaffold( ) 부터 시작한다. 해결책은 MaterialApp 을 MyApp이라는 커스텀 위젯 바깥으로 보내는 것. 위에 void main() 함수 안에서 MyApp() 을 MaterialApp 으로 감싸주었다. 그럼 버튼을 눌렀을 때 Dialog가 뜨는 동작이 잘..
