나만의 개발 블로그

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

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

🙆‍♂️ Margin 마진은 바깥 여백입니다. 위처럼 빨간 박스에 마진을 줘보면 이처럼 margin을 줄 수 있습니다. 🙋‍♂️ Padding 패딩은 안쪽 여백입니다. 패딩을 줘보면 이렇게 안쪽여백으로 인해 글짜가 이동된 것을 확인할 수 있습니다. EdgeInsets 속성 값으로 fromLTRB를 사용하면 개별 값을 지정해서 사용할 수 있습니다. 이는 패딩뿐만아니라 마진도 가능합니다.

🙆‍♂️Scaffold 위젯 Scaffold라는 위젯이 있습니다. 이렇게 appBar, body, bottomNavigationBar 3가지로 나뉩니다. 쉽게 말해서 어플 레이아웃을 상,중,하 3부분으로 쪼개줍니다. 위처럼 인스타그램이나 유튜브처럼 대부분의 앱은 상,중,하로 나뉘는데 Scaffold를 이용하면 해당 위젯을 구성할 수 있습니다. 🙋‍♂️위젯 가로 배치 코드 구성을 이렇게 가져간다면 이렇게 별을 하나 만들 수 있습니다. 여러개를 하려면 child를 여러개 하면 될까요? 아닙니다. 다른 방법을 사용해야 합니다. 이렇게 Row 위젯 안에 children이라는 배열을 이용하여 아이콘을 매치합니다. 그러면 이렇게 가로로 별을 찍을 수 있습니다. 🤷‍♂️위젯 세로 배치 위젯을 세로로 하려면 간단합니다..

🚀위젯 플러터에서는 앱 디자인을 위젯 짜깁기를 통해서 진행합니다. 스마트폰에서 사용하는UI같은 것들 모두 위젯라고 합니다. 예를 들어 글자를 넣고 싶다면 글자 위젯을 넣는 방식입니다. 💻위젯의 종류 글자 위젯 이미지 위젯 아이콘 위젯 박스 위젯 🙆‍♂️글자 위젯 글자위젯을 넣고 싶다면 전 게시글에서 소개했던 메인 페이지 구성하는 부분에서 Text("내용")을 입력하면 됩니다. 크롬으로 확인해보면 잘 나오는 모습입니다. 🙋‍♂️아이콘 위젯 아이콘 위젯은 Icon(Icons.아이콘 이름)을 넣으면 됩니다. star 아이콘은 이런 모습이고 아이콘의 이름은 flutter 홈페이지에서 찾을 수 있습니다. 🤷‍♂️이미지 위젯 이미지 위젯은 이런식으로 사용됩니다. 이미지 경로는 어떤 폴더를 만들어서 그 곳에서 관리해..

🚀목차 Flutter SDK 다운로드 Android Studio 설치 AVD(에뮬레이터) 설치 환경변수 등록 etc.. 🙆‍♂️플러터 설치 먼저 구글에 flutter install로 검색합니다. 그리고 위 사진과 같은 링크에 입장해서 해당하는 OS로 다운로드를 진행합니다. 저는 윈도우로 다운로드를 진행했고 다른 버전을 다운로드 받고 싶다면 SDK releases로 입장하여 다른 버전을 다운로드하실 수 있습니다. 압축파일 다운로드가 다 진행되었다면 압축을 풀어야 합니다. 저는 C 드라이브에 압축을 풀었습니다. 🙋‍♂️Android Studio 설치 Android Studio는 구글에 검색해서 이제 그냥 다운로드 하시면 됩니다. 들어가서 다운로드 하면 되는데 Mac북을 쓰시는데 M1이런거 달려있으면 Down..