안녕하세요! 오늘은 플러터플로우 2탄으로 1에서 만들어진 코드를 프로젝트로 옮겨서 완성해볼게요.
코드가 이미 깃헙에 있기때문에 코딩하는 부분은 빠르게 지나갑니다.
코드는 아래에 [참고문서] 확인해주세요
목차
00:00 최종미리보기
00:29 목차
00:47 코드 삭제/추가하는 방법
00:58 플러터 플로우 코드프로젝트 열기
01:11 프로젝트 생성
01:36 라이브러리 설치
01:58 홈페이지 코드 넣기
03:33 프로필 코드 넣기
05:24 로그인 코드 넣기
06:24 시작포인트 변경 (깃헙 -master프로젝트는 여기부터 따라와 주세요)
07:17 에러해결 (faicon, autosizetext, mediaquery, font )
08:34 진입점 변경으로 홈페이지 확인
09:00 홈페이지 에러 해결
10:04 진입점 변경 - 로그인
10:32 겟엑스를 활용한 내비게이션 추가 설명
11:19 겟엑스 설명
11:40 겟엑스 사용을 위한 코드 변경
12:12 다이나믹하게 데이터를 뿌리기위해 코드 변경
13:54 컨트롤러. 모델 생성 및 코딩
20:34 사용자 프로필 사진 코딩
21:04 헤더부분 회색 유아이 수정
21:35 사용자 프로필 사진 연결
21:51 피드 세로길이 수정
22:18 테스트
[참고문서]
코드 깃헙: https://github.com/ExplainingDevelope...
master : 중간까지 완료 - 시작포인트 변경 부터 따라와주세요
develop: 전체버전
겟x 라이브러리: https://pub.dev/packages/get
플러터플로우 : https://flutterflow.io/
인스타그램 피그마 : https://www.figma.com/community/file/...
연결강의
1편: • [ FLUTTER 10분 ] 플러터플로우 인스타그램 튜토리얼 1 (플러터 플로우로 인스타그램 페이지 만들기)
2편: • [ FLUTTER 10분 ] 플러터플로우 인스타그램 튜토리얼 2 (+ 겟엑스) (1편에서 생성된 코드 프로젝트로 옮기고 실행하기)
3편: 실제 기능 연결해보기 (준비 중입니다)
도움강의
피그마사용법: • [ 꿀팁 ] 피그마를 통한 디자인 팁