나만의 개발 블로그

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

🙆‍♂️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로 되어있다고 생각할 수 있습니다. 이렇게 꽉채우는데 다른 요소 중에 크기 지정된 부분이 있다면 그 부분을 제외하고 꽉채웁니다.

📋숙제 이 당근 마켓 레이아웃을 구성하는 것이 숙제입니다!!!! 상단바는 패스하고 body부분 만드는 것입니다. 🙆‍♂️레이아웃 구성 먼저 요소가 들어갈 부분들을 테두리로 만들어봤습니다. 코드는 엄청 깁니다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar( title: Text("Homework..

🚀title title 속성을 이용하면 AppBar에 글자를 넣을 수 있습니다. 이렇게 Text 위젯의 style을 바꿔서 폰트 색, 사이즈 폰트 등등을 변경할 수 있습니다. 🚀centerTitle +) 새로 추가 appBar에서 그냥 title 속성을 통해서 제목을 입력하면 왼쪽으로 치우쳐진 모습을 볼 수 있습니다. centerTitle 속성을 이용하면 가운데 정렬을 할 수 있는데 값으로는 true, false만을 받고 true 입력 시 가운데 정렬이 됩니다. 🚀backgroundColor +) 새로 추가 appBar의 배경색을 변경하고 싶다면 backgroundColor 속성을 이용해서 변경할 수 있습니다. 🚀elevation +) 새로 추가 현재로는 appBar가 이렇게 떠 있는 것 처럼 그림자 효..

🙆‍♂️버튼의 종류 버튼의 종류로는 TextButton() IconButton() ElevatedButton() 이 있습니다. 🙋‍♂️버튼 사용법 버튼들은 속성값으로 child와 onPressed를 꼭 넣어야 합니다. 그리고 onPressed를 통해서 click 되면 처리되는 함수를 넣습니다. 🚀TextButton() TextButton은 말그대로 Text로 된 버튼입니다. 🚀ElevatedButton() ElevatedButton이 우리가 알고 있는 버튼의 모습과 가깝습니다. 🚀IconButton() IconButton은 아이콘으로 된 버튼입니다. 특이한 점은 속성값에 child가 아니라 icon으로 들어간다는 점입니다. 🤷‍♂️ 버튼 style 🚀ElevatedButton() ElevatedButto..