나만의 개발 블로그

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

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

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

우선 싹다 지웁니다. 그리고 stless입력 후 탭을 해보면 이렇게 무엇인가 나오는데 저기 초록 네모처럼 MyApp을 입력합니다. 그리고 위에서는 Container에 해당하는 부분을 MaterialApp이라고 바꾸고 그 안에 코드를 짜는 방식이라고 합니다. 📌구조설명 시작 이 부분은 파일이나 패키지 가져오는 문법입니다. 이 부분은 "앱을 실행하겠다" 라는 의미를 갖는 부분인데 메인 페이지를 넣어서 실행합니다. 현재 메인 페이지는 MyApp입니다. 그래서 이 공간을 이용해서 메인 페이지를 구성하는데 위 초록 공간은 그냥 형식 상 있는 구조고 밑에 빨간 공간에 코딩을 해서 메인 페이지를 구성할 수 있습니다. 다음 게시물에 이 메인 페이지에 작성되는 위젯 부분을 알아보겠습니다.

💻프로젝트 생성하기 초기화면에서 New Flutter Project를 선택합니다. 이런 화면이 나오는데 Flutter 탭으로 이동 후 Flutter 압축 해제 했던 폴더 이름을 경로로 입력합니다. 다 했다면 Next 이곳에서 프로젝트 명과 프로젝트 경로를 설정해줍니다. 그리고 Finish 코드는 lib폴더 밑에 main.dart에 짜준다고 하네요. 근데 테마가 마음에 안들어서 바꿀 예정입니다. 그리고 추가적으로 설정해야 하는 부분이 있습니다. test 폴더 밑에 analysis_options.yaml 파일에 몇 가지 적어줘야 합니다. rules 부분에 추가해주면 됩니다. 이렇게 빨간색 4줄 입력해주면 됩니다. Lint를 잠깐 끄는 용도라고 하네요.

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