주니어 개발자 모몽'-' 주니어 개발자 모몽'-'

화면설계 - 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..

화면설계 Tab Page에 네비바가 존재하고, Home Page, SearchPage, Account Page가 있다. 각 메뉴를 클릭하였을 경우 각 페이지로 이동되도록 구현한다. 일단 화면이 이동되는 것만 구현해두고, 각 페이지는 다음에 차근차근 변경할 예정이다. bottomNavigationBar: 하단에 있는 네비게이션 바 bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, // 선택된 네비게이션바 아이템 Index onTap: (index) { // 클릭이벤트 setState(() { _currentIndex = index; // 클릭한 네비게이션바 아이템을 현재 Index로 지정. }); }, items: const [ ..

StatelessWidget 생성 시 자동 import가 안되어 직접 import 기능을 넣어야 하는 번거로움이 있다. 자동 완성 코드를 수정하는 방법이다. Android Studio 왼쪽 상단 탭에서 File > Settings를 들어간다. Editor > > Live Template에 들어간 뒤 Flutter 아래 stless가 있다. Template text를 보면 import가 없는 것을 확인할 수 있다. 맨 위에 아래 코드를 삽입한다. import 'package:flutter/material.dart'; stless 입력 시 자동완성 코드 import 'package:flutter/material.dart'; class $NAME$ extends StatelessWidget { const $N..

화면설계 로그인 했을 경우와 안했을 경우 다른 화면이 뜰 수 있도록 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..

에러메세지 Unhandled Exception: Connection refused 오류 원인 API 도메인 주소를 localhost로 사용으로 발생한 오류이다. 안드로이드 애뮬레이터 사용 시 컴퓨터 환경이 아닌 모바일 환경에서 작동중인 것이므로 localhost를 사용하면 접근이 거부되어 오류가 발생한다. 수정방안 ip 주소로 변환해야 한다. // 기존 http://localhost:8080/ // 변경 http://192.168.0.1:8080/ 자신의 ip주소(IPv4 주소)는 cmd에 들어가서 ipconfig (iOS일 경우 ifconfig)명령어를 사용해서 확인할 수 있다.

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..

Flutter Plugin 설치 Android Studio Plugins에서 flutter 설치 Flutter Install 버튼을 클릭한다. Accept 버튼을 클릭한다. Install 버튼을 클릭하여 설치한다. Rstart IDE 버튼을 클릭한다. Restart 버튼을 클릭하여 안드로이드 스튜디오를 재시작한다. 프로젝트 생성 New Flutter Project를 클릭한다. 좌측에 Flutter를 클릭하고 Flutter SDK path를 설정한다. Flutter SDK path는 기존에 Flutter를 설치했던 path를 지정한다. 지정한 후 OK버튼을 클릭한다. Next 버튼을 클릭한다. Project name 및 설정들을 맞추고 Create 버튼을 클릭하여 프로젝트를 생성한다. 프로젝트가 생성된 것..

Flutter 설치방법 플러 설치 링크 https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flutter.dev 설치 링크로 들어가서 상단에 있는 Get started 클릭한다. 맞는 OS를 선택하여 클릭한다.(Windows) fluuter zip 파일 다운로드한다. 원하는 위치에 압축푼다. (flutter라는 폴더로 압축 풀림) Flutter 환경설정 내 PC 우클릭 > 속성 > 고급..