본문 바로가기
관리자

Programming-[CrossPlatform]/Flutter

(34)
Flutter 기본-17. 채팅앱 - 로그인 Validation Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. ValueKey 적용 각 TextFormField 부분이 Key 값을 가지고 있지 않아서 Flutter가 같은 타입의 위젯들을 구분할 수 없는 상태이다. 그래서 위 영상처럼 SIGNUP에 작성된 내용이 LOGIN에도 그대로 남게 된다...
Flutter 기본-16. 채팅앱 - TextFormField, inline if, AnimatedPositioned Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. TextFormField Login, Signup 버튼을 생성한 Row 아래에, 상위 Colmun의 children으로 Container를 추가해준다. Form 위젯을 추가하고 TextFormField를 추가한다. decoration ..
Flutter 기본-15. 채팅앱 - 로그인 기본 구조: Positioned, MediaQuery.of Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com in-app background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 이제 로그인 및 채팅이 가능한 채팅앱을 만든다. 이번 글에서는 UI 만들기에 집중한다. 강의에서 설명하는 것처럼 UI 작성에 익숙해지기 위한 과정으로 최대한 리팩토링을 자제하고 하나의 파일에 쭉 이어서 만든다. 앞서 배웠던 부분..
Flutter 기본-14. 날씨 앱 만들기 데이터, 이미지 연동, Key 개념 이해하기 Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 이제 앱을 완성한다. 앞서 배웠던 위젯 트리 구성이나 데이터 연동 부분 외에 직접 작업하면서 배웠던 점들을 기록한다. 강의에서 배운 부분들도 있지만, 대부분이 내가 마음대로 작성한거라 최적의 방식으로 코딩하지는 않았다. 나중에 best practice를 배우게 되면 더 좋을 것 같다. 1. 아이콘(그림 연동) 웹 이미지 연동 : Image.network(myUrl) 위 앱 화면의 그림상..
Flutter 기본-13. 날씨 앱 만들기 기본3, UI 구성 실습 Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 1. appBar, 위치 및 시간 관련 라이브러리들 appBar Scaffold/appBar에 leading, actions 속성으로 각 아이콘을 설정해준다. 여기서 extendBodyBehindAppBar 속성을 적용하면 이름 그대로 Body부분이 appBar까지 확장된다. 이후 AppBar를 transparent, elevation: 0.0으로 주면 appBar와 body간 경계가 ..
Flutter 기본-12. 날씨 앱 만들기 기본2 Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 지난 글에 이어서 날씨 앱 만들기를 해본다. 중요한 개념들을 코드를 보며 살펴볼 것이다. 1. 객체지향적으로 짜기 아래와 같은 원칙을 갖고 코드를 짠다. 파일 이름은 소문자로만 구성한다. snake_case로 작성한다. 각 파일 및 클래스가 어떤 객체(명사)를 대표한다고 생각하고 이름을 짓는다. 예를 들어 my_location은 location을 얻어오는 역할을(역할만) 하고, 그 내부..
Flutter 기본-11. Null Safety, 날씨앱 만들기 기본 Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 1. null safety Flutter 2 버전부터 null safety mode를 지원하게 되었다. nullable 하지 않은 값을 선언했는데 null이 들어올 위험이 있으면 compile 에러를 낸다. 특히 class 안의 변수는 생성과 동시에 반드시 초기화 해줘야한다. 아니면 아래의 nullable 처리들을 해줘야한다. nullalble 처리 타입 뒤에 물음표 ?를 붙여주면 nu..
Flutter 기본-10. Dart 학습: final/const, List.generate, Future/Async, FutureBuilder Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 이번 글에서는 기반 지식을 dart로 학습해본다. 마지막에는 이를 적용하여 flutter로 비동기처리하는 방법에 대해 배운다. 1. final 과 const의 차이. 용례 final과 const는 둘 다 변하지 않는 값의 의미를 내포하므로 정확한 의미가 용례가 살짝 헷갈릴 수 있다. const const는 컴파일 후에도 할당이 필요없는 값에 사용한다. 선언과 동시에 초기화되어 고정된다...