문제 이미지를 추가했는데 '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 먼저 파티를 생성하는 부분부터 수정해야했..
https://blog.codemagic.io/integrate-firebase-cloud-firestore-with-flutter-perform-crud/
문제 오류 메세지 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 { ..
https://firebase.google.com/docs/flutter/setup?hl=ko#add_flutterfire_plugins Flutter 앱에 Firebase 추가 | Firebase Documentation 의견 보내기 Flutter 앱에 Firebase 추가 plat_ios plat_android plat_web iOS+ Android 웹 기본 요건 아직 Flutter 앱이 없다면 시작하기: 시험 사용을 완료하여 선호하는 편집기나 IDE를 통해 새 Flutter 앱을 만들 수 firebase.google.com https://www.inflearn.com/course/flutter-netflix-clone-app/unit/37790 학습 페이지 www.inflearn.com 여기 참고해..
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..
https://while1.tistory.com/118 [Flutter] Align 위젯 Align 자식 위젯을 원하는 방향으로 정리하고 싶을 때 Align 위젯을 사용하여 정렬할 수 있다. 다른 위젯과 마찬가지로, 자식 위젯을 Align으로 감싼 뒤 alignment 프로퍼티를 이용하여 방향을 설정해주 while1.tistory.com
자꾸 변수 선언하는데 빨간줄이 뜨면서 late 를 추가하라고 도움말이 나왔다. 추가하면서 하니까 빨간줄이 없어지긴 했는데 무슨의미인지 궁금해서 찾아봤다. Null Safety 란 개발되는 코드가 null 안전성을 보장한 상태로 개발되게 하고자 하는 개념인데 Non-Nullable 변수는 선언과 동시에 초기값을 주어야한다. 근데 어떤 경우에는 초기값을 줄 수없는 경우도 있다. 변수가 null 인 상태로 이용되는 건 아니지만 초기값이 앱이 실행되면서 결정되는 경우이다. 이럴 때 late keyword 를 사용한다. 단어 그대로 초기화 시점을 뒤로 미루겠다는 의미. 물론 선언과 동시에 초기값을 주지는 않지만, 그 변수를 이용하기 위해서는 초기값을 주어야한다. late 추가하고 편-안 ref: https://k..
https://pub.dev/packages/carousel_slider carousel_slider | Flutter Package A carousel slider widget, support infinite scroll and custom child widget. pub.dev
https://devmg.tistory.com/181 [Flutter] Image 이미지 box.fit 옵션 정리 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '사진 옵션', home: Scaffold( appBar: AppBar( title: Text('사진 옵션'), ), body: MyApp(), ), )); } class MyApp extends.. devmg.tistory.com
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..
https://velog.io/@minsuhan1/Flutter%EB%A1%9C-%EB%A7%8C%EB%93%A0-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0-%EC%95%B1 Flutter로 만든 간단한 대학생 커뮤니티 서비스 Flutter + Firebase Realtime Database 사용하여 학과별로 게시판이 분류된 대학생 커뮤니티 앱 만들어보기 velog.io
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 해봤다. 잘 뜬다 😭
https://velog.io/@sangh518/flutter-tips 개인적인 Flutter 꿀팁 모음 본 글은 플러터를 사용하면서 개인적으로 유용했던 사항들을 기록한 글입니다 velog.io
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(), ), ),..
