나만의 개발 블로그

📋숙제 이 당근 마켓 레이아웃을 구성하는 것이 숙제입니다!!!! 상단바는 패스하고 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 이런거 하려면 다른 방법들로 사..

🙆‍♂️ 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입니다. 그래서 이 공간을 이용해서 메인 페이지를 구성하는데 위 초록 공간은 그냥 형식 상 있는 구조고 밑에 빨간 공간에 코딩을 해서 메인 페이지를 구성할 수 있습니다. 다음 게시물에 이 메인 페이지에 작성되는 위젯 부분을 알아보겠습니다.