나만의 개발 블로그

🙆‍♂️CircleAvatar CircleAvatar 위젯을 사용하면 사진을 동그라미에 넣어서 표현할 수 있습니다. 🚀backgroundImage 이렇게 backgroundImage 속성을 통해서 이미지가 들어간 동그라미를 표현할 수 있습니다. 🚀radius radius 속성을 통해서 이미지의 크기도 키울 수 있습니다. 🙋‍♂️Divider Divider 위젯을 사용하면 구분선을 그릴 수 있습니다. 🚀height Divider의 height 속성은 말그대로 높이 속성인데 전 객체와의 차이라고 생각하셔도 됩니다. height가 110일 때보다 210일 때가 더 많이 띄어져 있습니다. 🚀color color 속성을 이용해서 구분선의 색을 바꿀 수 있습니다. 🚀thickness thickness는 구분선의 굵..

🙆‍♂️main.dart 작성 텅 비어있는 main.dart입니다. 먼저 dart를 import 해줘야 합니다. 🚀import 1. i를 누르고 import ' ';를 소환 2. 작은따옴표 안에 fm을 작성 후 package:flutter/material.dart 를 자동완성 (그냥 입력해도 상관없습니다.) 완성 🚀main() 1. 함수가 끝나면 다른 값을 반환하지 않는다고 main()함수를 void로 선언합니다. 2. fat arrow(=>)를 사용해서 runApp 함수를 호출합니다. 3. runApp()함수는 인자값으로 MyApp()이라는 클래스를 호출해서 실행합니다. 🚀stateless widget 1. stl을 눌러서 Flutter Stateless Widget을 자동완성 되도록 합니다. 이렇게 ..

먼저 이 게시물을 보고 오셔야 합니다. 🙆‍♂️ 애뮬레이터 사용해서 디버그 하기 보기(View) > 명령 팔래트(command)를 하거나 Ctrl+Shift+P를 해서 명령 팔래트를 띄웁니다. 그리고 flutter: Select Device를 입력하고 설치했던 모바일 에뮬레이터를 선택합니다. 그러면 이렇게 스마트폰 UI가 나오는데 이렇게 끝나는 것이 아니라 VS Code에서 F5를 하거나 실행 > 디버깅 시작을 해줘야 비로소 작성하고 있는 어플이 나오게 됩니다.

🙆‍♂️ Flutter 파일 구조 플러터 프로젝트를 생성하면 이렇게 많습니다. 🚀pubspec.yaml pubspec.yaml 파일은 프로젝트의 메타데이터를 정의하고 관리하는 파일입니다. 프로젝트의 버전, 사용 환경, dart의 버전이나 라이브러리 등을 정의합니다.

🙆‍♂️VS Code에서 플러터 프로젝트 생성 1. 먼저 VSCode에서 플러터 확장프로그램을 설치합니다. 2. 보기(View) > 명령 팔레트(Command) 클릭 or Ctrl+Shift+P 하기 3. Flutter: New Project 입력하기 (저는 사용했었어서 최근에 사용한 항목으로 자동 완성해서 나오네요.) 4. Application 5. 저장할 폴더 선택 6. 플러터 프로젝트 명 짓기 (대문자, 특수문자 안된다네요..) 끝

🙆‍♂️Widget 플러터에서 위젯은 모든 UI를 만들고 구성하는 기본 단위라고 생각하시면 됩니다. 이렇게 텍스트, 이미지, 버튼 등등이 위젯으로 이루어져 있습니다. 코드를 확인해보면 다른 언어의 함수와도 어느정도 닮아있습니다. 뿐만아니라 레이아웃을 구성하는 모든 요소들도 위젯으로 이루어져 있습니다. 웹에 비유해보면 div태그도 위젯 p태그도 위젯 모든 태그를 위젯으로 생각하시면 됩니다. 심지어 가로정렬을 해주는 Row 위젯과 세로정렬을 해주는 Column위젯 가운데 정렬 해주는 Center위젯 등 위치 정렬에 대한 위젯들도 존재합니다. 🚀Stateless Widget stateless 위젯은 상태가 없는 정적인 위젯입니다. 변화가 없는 위젯이라고 생각할 수 있습니다. 특징으로는 스크린상에 존재만 할 뿐..

🚀AVD 설치 Adroid Studio에서 Tools탭 > Device Manager 클릭 Device Manager에서 Virtual부분에서 Create device 클릭 원하는 핸드폰 모양 고르고 Next 원하는 시스템 이미지파일을 다운로드 할 수 있습니다. 저는 Pie를 다운로드 했습니다. 다되면 Finish 설치한 이미지 파일 선택 후 Next Finish!!!

🙆‍♂️ListView 세로로 무언가를 배치하고 싶을 때 Column 위젯을 사용하는데 너무 많아서 스크롤바가 필요하다면 ListView위젯을 사용하면 됩니다. 이처럼 Column 위젯 안에 Text 위젯을 많이 넣으면 스크롤이 생기지 않고 너무 많이 넣었다고 오류가 나는데 Column 대신 ListView를 사용하면 오류는 없어지고 스크롤 바가 생겨서 올라갔다 내려갈 수 있게 됐습니다. 또 다른 장점으로는 스크롤 위치 감시도 가능하고 메모리도 절약할 수 있다고 합니다! 쇼핑몰, SNS등 모두 ListView를 만듭니다.

🙆‍♂️커스텀 위젯 위젯을 구성할 때 너무 코드가 길어지면 보기 힘드니 커스텀 위젯을 사용합니다. 🚀사용법 1. 정의된 코드 바깥에 stless를 치고 탭을 누릅니다. 2. 클래스를 원하는 이름으로 작명합니다. 3. return 옆에 사용할 코드들을 작성하면 됩니다. 이렇게 SizedBox로 긴 코드가 있다고 가정을 합니다. 마지막으로 4.이 커스텀 위젯을 body부분에 붙여넣으면! 신기하게도 잘 나오는 모습입니다. 이렇게 안하고 변수에 넣을 수도 있지만 값이 변하는 위젯이라면 오류가 생길 수 있습니다.

🙆‍♂️Flexible Flexible 위젯으로 감싸면 안에 있는 위젯은 크기를 %로 표현할 수 있습니다. 🚀flex Flexible 위젯으로 감싸고 child 속성 다음으로 flex 속성을 사용해서 비율로 크기를 나타낼 수 있습니다. 이렇게 같은 수로 비율을 주게된다면 5 5로 주지 않아도 반으로 나뉘게 됩니다. 컨테이너가 3개가 있어도 같습니다. 이렇게 3개로 해도 동일한 비율이면 1:1:1로 나오는 모습입니다. 그리고 이는 Row 위젯 안에서만 아니라 Column위젯에서도 동일하게 동작합니다. 🙋‍♂️Expanded Expanded는 Flexible의 flex값이 혼자 1로 되어있다고 생각할 수 있습니다. 이렇게 꽉채우는데 다른 요소 중에 크기 지정된 부분이 있다면 그 부분을 제외하고 꽉채웁니다.