본문 바로가기
프로젝트/틱톡 클론

[틱톡 클론-03] 플러터 퀴즈 앱 따라하기

by 1005ptr 2023. 4. 23.
반응형

빠르게 압축적으로 플러터를 살펴볼 수 있어서 좋았습니다. 따라 치기보다는 한번 쭉 듣고 흐름을 이해하고, 궁금했던걸 정리해서 학습하고, 다시 코드를 살펴보는 식으로 학습하시면 좋은 강의입니다.

 

플러터와 장고로 1시간만에 퀴즈 앱/서버 만들기 [무작정 풀스택]

 

[무료] 플러터와 장고로 1시간만에 퀴즈 앱/서버 만들기 [무작정 풀스택] - 인프런 | 강의

플러터와 장고로 풀스택 퀴즈앱을 만드는 강의입니다! 배울 거리가 많은 풀스택 강의로 풀스택 개발자가 되어보세요:), - 강의 소개 | 인프런

www.inflearn.com


정리

더보기

StatefulWidget이 뭐냐 왜 쓰나

State<Screen> 이거 뭐임?
SafeArea는 뭐야?
Scaffold는 뭐야?
onPressed에서 Navigator.push(context, MaterialPageRoute(builder : (context) = >QuizScreen(quizs: quizs))

애니메이션 넣기 flutter_swiper 패키지
패키지 설치하는 방법
- pubspec.yaml 파일
- dependencies: 아래에 패키지 명 적기. 버전 안적어도 되네
- child로 Swiper 추가



auto_size_text 패키지
텍스트 사이즈를 컨테이너에 따라 자동 변경해주는 기능



screen은 뭐고 widget은 뭐고 model은 뭔가?
InkWell은 뭔가?

Widget클래스가 아니라 WidgetState 클래스의 build 함수에다가 UI를 작성한다.
Widget에는 속성이랑 생성자 정도만 작성되어있음


Widget 상태 변화에 따라 콜백 받아서 전체 상태 변경하는 예제

EdgeInsets 많이 쓰네
Container
Center
ButtonTheme
RountedRectangleBorder
BorderRadius
RaisedButton
SwiperController
MediaQuery
Text
TextStyle
FontWeight
Expanded


히스토리를 없애는 기능이 있어야 된다.
WillPopScope로 전체를 감싸준다.
onWillPop: () async => false,


장고에서 관리자 페이지를 기본으로 제공하는가보다.
단순히 모델 등록만 했는데 데이터 등록이 된다고 함

API 접속을 헀는데 데이터가 화면에 보이는것도 신기하다.
뭔가 PostMan이 통합되어 있는 느낌?

pythonanywhere, heroku 두가지 무료 배포 방식이 있다고 함
배포하지 않은 상태에서 장고랑 플러터를 연결하기는 쉽지 않다고 한다.

통신할때 쓰는 패키지 http

클래스를 쓸때도 있고 그냥 함수를 선언할때도 있고

로딩중 표시는
SnackBar로 만들것이다.
ScaffoldState를 key 지정 --> 이거 ref인듯
showSnackBar 함수가 있나보네 안에 CircularProgressIndicator를 지정

 


프로젝트 구조 설정, 홈 화면 만들기

 


퀴즈 모델 만들고 퀴즈 풀기 화면 만들기

 


퀴즈 결과 화면 만들기

 


플러터에 API 연동하여 앱 마무리 하기

 

 

 

반응형

댓글