나만의 개발 블로그

🙆‍♂️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 이런거 하려면 다른 방법들로 사..

🙆‍♂️ 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..