플러터 기초
-
[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..
-
[Flutter] Flutter 시작하기 및 기본 샘플 앱 설명Study/소소한 팁 2023. 5. 2. 16:24
Flutter Project 시작하기 Scaffold, AppBar flutter Project를 생성하면 최초로 main.dart 코드가 실행된다. Scaffold안에 appBar와 body가 존재한다. appBar는 화면 상단에 있는 파란색 Bar이고, body는 나머지 하얀 화면이다. appBar와 body에 hello world를 입력해서 출력해봤다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @over..