강의 기록/Flutter 인스타그램 클론 생성(오준석)
-
[Flutter] 인스타그램 클론 생성하기 - 3 Home Page 화면 만들기, Flutter Inspector 사용법강의 기록/Flutter 인스타그램 클론 생성(오준석) 2023. 5. 17. 14:51
화면설계 - Home Page UI Home Page는 Column을 생성한다. Column안에 Text, Card를 생성한다. Card안에 또 Column을 생성한 후 Image, Text, Row를 생성한다. Row안에 Image List를 넣는다. Flutter Inspector : Flutter 위젯 트리를 시각화하고 탐색하기 위한 도구. 위젯 컨트롤부터 레이아웃까지 모든 항목을 블록으로 사용해 유용하게 사용되는 도구이다. https://docs.flutter.dev/tools/devtools/inspector Using the Flutter inspector Learn how to use the Flutter inspector to explore a Flutter app's widget tree..
-
[Flutter] 인스타그램 클론 생성하기 -2 네비바 클릭 시 화면 전환 기능 구현강의 기록/Flutter 인스타그램 클론 생성(오준석) 2023. 5. 16. 14:01
화면설계 Tab Page에 네비바가 존재하고, Home Page, SearchPage, Account Page가 있다. 각 메뉴를 클릭하였을 경우 각 페이지로 이동되도록 구현한다. 일단 화면이 이동되는 것만 구현해두고, 각 페이지는 다음에 차근차근 변경할 예정이다. bottomNavigationBar: 하단에 있는 네비게이션 바 bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, // 선택된 네비게이션바 아이템 Index onTap: (index) { // 클릭이벤트 setState(() { _currentIndex = index; // 클릭한 네비게이션바 아이템을 현재 Index로 지정. }); }, items: const [ ..
-
[Flutter] 인스타그램 클론 생성하기 - 1 화면 설계 및 프로젝트 생성강의 기록/Flutter 인스타그램 클론 생성(오준석) 2023. 5. 12. 16:48
화면설계 로그인 했을 경우와 안했을 경우 다른 화면이 뜰 수 있도록 RootPage를 최초페이지로 두고 경우에 따라 Login Page 또는 Tab Page가 나오도록 설정 프로젝트 생성 왼쪽 상단 탭 File > New > New Flutter Project...를 선택하여 프로젝트를 생성한다. SDK 위치 확인하기 SDK 설치방법 2023.04.26 - [Study/소소한 팁] - [Flutter] 플러터 설치 및 환경설정(Windows) [Flutter] 플러터 설치 및 환경설정(Windows) Flutter 설치방법 플러 설치 링크 https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app de..