tiktok clone (flutter로 틱톡 클론코딩)

프로젝트를 만들 때 텍스트, 컨테이너 너비 등 크기를 설정할 때가 많다. 하지만 이 모든 요소를 임의로 설정하면 프로젝트 디자인의 통일성이 떨어지고 불규칙해 보이기 때문에 미리 고정 값을 설정하면 좋다.https://github.com/soaringwave/t

위와 같은 부분에 UI가 겹쳐 제대로 보이지 않는 경우를 대비해 여백을 설정해왔다. SafeArea 위젯은 이를 위한 위젯으로, 사용자가 볼 수 있는 화면에 UI요소들을 배치한다는 특징을 지니고 있다.https://github.com/soaringwave/ti

flutter에서 특정 위젯을 클릭하면 특정 위젯(스크린)으로 이동하기 위해 Navigator.of(context).push()를 사용할 수 있다.예)https://github.com/soaringwave/tiktokclone/commit/6c45515260c

이 사진 속 authentication 버튼들을 만드는 데에 사용한 위젯들을 기록하다. FractionallySizedBox 상위 요소의 크기를 이용하는 SizedBox라고 할 수 있다. widthFactor, heightFactor를 상위 요소의 비율에 맞춰 값을

앱의 ui를 설계할 때 디자인이 통일되도록 비슷하게 설정할 때가 있다. 이를 매 페이지에 복사붙여넣기 하지 않고 테마로 설정해두면 유용하게 사용할 수 있다.여러 위젯 중 AppBar의 테마 설정을 위해 AppBarTheme을 기록한다.위 사진처럼 회원가입 과정에 화면에

TextField 위젯은 username을 입력받아 처리할 수 있다. 이 스크린에서는 username을 입력받아 \_username에 저장할 것이다. 그러기 위해선 우선 TextField를 먼저 만든다. 그리고 cursorColor, hintText를 설정해 디자인을

example@example.example이 이메일 주소 양식이고, RegExp를 통해 사용자가 이메일 주소를 갖춘 정보를 확인할 수 있다.(TextField에 입력되는 값은 \_email에 자동으로 저장된다) \_isEmailValid 함수가 동작하면 먼저 \_em

먼저 TextField의 decoration인 InputDecoration의 suffix를 설정한다. x마크와 눈 모양 아이콘을 아이콘 버튼으로 구현하고 이를 Row에 담아 TextField의 오른쪽에 표시할 수 있다.만약 x 버튼을 누른다면, TextField에 나타

먼저 날짜의 기본값을 Date.now()로 \_initalTime에 저장한다. 그리고 CupertinoDatePicker 위젯의 initialDateTime 값으로 저장한다. 현재를 기준으로 미래의 생일을 가진 사용자는 없으니 maximumDate도 동일하게 설정해 과

Form을 관리하고자 \_formKey를 생성하고 Form의 key로 설정한다.Form 안의 TextField의 property인 validator를 설정하여 에러메시지를 반환할 수 있다. 만약 TextField의 value가 비워져 있다면 Email is not va

관심사를 클릭할 수 있는 화면이다. 그 중 Wrap, Scroll 관련 내용을 기록한다.여러 관심사를 Container에 담아 표현할 때, Row로 정렬하되 화면을 넘는 요소는 다음줄에 표현하기 위해서 Wrap을 사용했다. children의 경우 for문을 사용해 관심

DefaultTabController의 child로 TabBarView를 설정하고, TabBarView에 여러 화면을 children으로 구성하면 드래그에 따라 children을 하나씩 화면에 나타낼 수 있다.DefaultTabController, TabBarView

위 사진처럼 사용자에게 사용방법을 알려주거나 알림 및 정보를 공지하는 화면을 AnimatedCrossFade 위젯과 제스쳐 탐지를 통해 구현할 수 있다.먼저 화면에 보일 화면 두 가지를 AnimatedCrossFade의 firstChild, secondChild에 설정