나만의 개발 블로그

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

🙆‍♂️Text 🚀color Text 위젯의 스타일에 대해서 알아보겠습니다. Text 위젯의 스타일은 이렇게 style 속성안에서 정의할 수 있습니다. 글자 색 폰트, 등등을 할 수 있습니다. 이렇게 글자색을 지정할 수 있습니다. 이 때 색 표현 중 Hex코드로 색을 표현할 수 있는데 이렇게 0xff로 시작하여 뒤에 Hex코드로 된 6자리를 적어주면 잘 적용이 됩니다. 아니면 Color.fromRGBO를 사용해서 표현할 수도 있습니다. Hex 코드를 사용하거나 fromRGBO를 사용하면 장점이 옆에서 색을 직접 고를 수 있게 됩니다. 🚀fontSize fontSize 속성을 활용해서 글자 크기도 키울 수 있습니다. 🚀letterSpacing letterSpacing 속성을 이용해서 자간을 설정할 수 있습..

🙆‍♂️ Center 이런 컨테이너를 가운데 정렬 하려면 이렇게 Center() 안에 Container를 넣어주면 됩니다. 🙋‍♂️Align Align()을 이용하면 내가 정렬하고 싶은 많은 위치에 정렬할 수 있습니다. 이렇게 중간, 밑 중간 등등.. 으로 할 수 있습니다. 이런식으로 topright 등등 처리가 됩니다.

🤷‍♂️ Decoration Container에서 border나 기타 등등을 넣어주려면 decoration()을 활용해야 합니다. 이렇게 decoration 안에 BoxDecoration을 통해서 박스에 대한 꾸밈을 설정할 수 있고 색, 테두리, 배경어쩌구모드, 테두리 기울기, 박스그림자 등등.. 을 이곳에서 정의합니다. 현재 위 코드처럼 짜면 에러가 나는데 그 이유는 Color를 중복으로 지정해 줬기 때문입니다. dercoration을 사용하면 color는 decoration 안에서 정의해줘야 합니다. 🚀 Border border에 대한 속성들은 width와 style이 있습니다. width는 테두리 두께이고 style에 대한 정보는 없습니다. dashed나 dotted 이런거 하려면 다른 방법들로 사..