티스토리 뷰
Flutter가 사용하는 위젯을 이해하는 것. (모든 것을 외울 필요는 없다.)
StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯 (단순한 나열)
StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯 (카톡 채팅창)
StatelessWidget
extends : 상속을 해오는 것.
build 함수 : 화면에 보이는 자식 위젯을 반환. (리턴값이 Widget)
https://dartpad.dev/?id=847e8f2ade70953666b461e745d8686f&null_safety=true
DartPad
dartpad.dev
StatefulWidget
Bulid함수가 <상태 클래스> 내에 있는 것이 중요함.
상태클래스 내에 어떤 위젯을 그려주는지 중요함.
// setState : build 메소드를 다시 호출해서 화면 갱신!
내가 화면에 띄울 위젯을 어떻게 하나?
원하는 위치에 원하는 요소를 배치하는 작업을 레이아웃(layout)이라고 부릅니다.
TEXT 기본 위젯.
Container 기본 위젯
Margin과 Padding이 바깥, 안쪽 영역이라 생각하면됨.
컨테이너 안에는 어떤 위젯도 다 넣을 수 있음. (컨테이너 안에 컨테이너를 넣을 수 있음)
Material은 안드로이드용, Cupertino Icon은 IOS용임
https://fonts.google.com/icons?selected=Material+Icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
Image위젯을 쓰는 방법.
body: Center(
child: Image.network(
'https://i.ibb.co/CwzHq4z/trans-logo-512.png',
width: 150,
),
Scaffold 위젯 쓰는법.
Scaffold = 비계 (공사현장에서 보여주는 뼈대같은 것)
자주쓰는 요소를 보여줄 때, 뼈대를 만들어서 쓰는 것.
appBar : AppBar() = 앱 상단에 바형태로 보여주는 것.
Body : 사용자가 가장 많이 쓰는 영역. (Container를 이용해서 일단 한칸을 만들어준다.)
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.amber,
),
Tip VSCode를 쓸 때는 뒤에 ,(쉼표)를 하나 적어주면 자동으로 정렬이 된다.
bottomNavigationBar : 앱 하단에 들어가는 것.
(데이터를 받을 때 List 타입으로 받음)
+버튼으로 뜨는 것을 컨테이너로 만들것이 아니라 floatingActionButton으로 만들면 편하다.
Column 위젯은 세로 방향에 대한 레이아웃을 잡을 때 사용합니다★ (열이 늘어나는것)
1행 N열이라고 생각
ㅁ
ㅁ
ㅁ
ㅁ
Column에서 가로 세로 방향만 바꾸면 Row
Stack의 개념. (겹쳐서 쌓이게 된다)
★가장 중요한것. 마지막에 쓰인 코드가 가장 위에(앞에)온다.
★ Positioned 위젯을 이용하면 Stack 내부에서 원하는 위치에 배치할 수 있습니다.
SingleChildScrollView는 Child 위젯이 화면의 스크린보다 큰 경우, 스크롤 할 수 있도록 만들어줍니다.
(묶는 방법. alt + Enter 누르고 Widget으로 감싸고 Widget대신에 SingleChildScrollView로 변경)
텍스트 입력이 필요한 경우에. TextField.
Flutter에서 텍스트 입력을 받을 때 TextField 위젯을 사용합니다.
클릭을 했을 때 이벤트를 만드는 법.
화면에서 이동을 할 때 필요한 것.
창과 창 사이를 오갈 수 있는 것. context는 페이지가 어떤 정보를 담고 있는지에 대한 인지값.
context를 받아서, 그 페이지의 위젯 (여기선 SecondPage라는 위젯)으로 Output을 넘겨줌.
인스타그램 만들기.
appBar의 형태.
사진을 쓰기 위해서 필요한 것.
(메인 프로젝트에 assets 폴더 추가해서 이미지 추가하지.
pubspec.yaml파일에 설정을 해둘 것.)
fit: BoxFit.cover라고 넣어주면 이미지의 비율을 유지하면서 고정된 폭과 높이에 맞추어 이미지를 적절히 잘라서 보여줍니다.
파일을 분리하는 방법
home_page.dart 에러 문제 = main.dart에 있는 import가 제대로 안된 것이 문제. Quickfix (Ctrl + . )을 이용해서 해결
Feed Widget을 Extract한다?
파일을 새로 만들고, 코드를 정리하면 됨.
Import 안되어있는 패키지를 깔아주고,
파일이 분리되면서 생기는 참조 부분을 채워주면 됨.
이와 같이 기능을 변경하거나 추가하지 않고, 코드만 관리하기 쉽게 변경하는 과정을 리팩토링(refactoring)이라고 부릅니다.
좋아요, 댓글등이 바뀌는 것은 StatefulWidget으로 만들어야 함
ListView 위젯은 동일한 레이아웃에 값만 바뀔 때 쓰면 좋은 위젯임. (틀을 만들고, 내용만 바꾸고 싶을 때 쓰면 됨)
(스크롤이 가능하다는 특징이 있음)
ListView.builder = 여러가지 반복을 줄여주는 For문임.
context, index는 무조건 들어가고, index의 카운트를 사용할 수 있다 정도만 알고 있으면 됨.
이미지 변수를 바꿔서 교체하는 방법.
final List<String> images = [
"https://cdn2.thecatapi.com/images/bi.jpg",
"https://cdn2.thecatapi.com/images/63g.jpg",
"https://cdn2.thecatapi.com/images/a3h.jpg",
"https://cdn2.thecatapi.com/images/a9m.jpg",
"https://cdn2.thecatapi.com/images/aph.jpg",
"https://cdn2.thecatapi.com/images/1rd.jpg",
"https://cdn2.thecatapi.com/images/805.gif",
];
이미지를 받아서 다양하게 넘겨주는 방법.
Shazam 과제 코드
배경색을 그라데이션 입히는 방법
Linear Gradiant를 활용할 것.
GridView, SingleChildView 등에서 쉽게 발생하는 문제점 : 얼마나 많은 범위를 차지 할지 몰라서 초과되는 에러.해결법 : widget으로 감싸고, widget 대신에 Expanded로 감싸면 문제 해결.
텍스트 위에 아이콘을 집어 넣는 방법.
어플에 이미지를 추가하는 방법.
1. 새폴더로 assets을 만든다.2. 새폴더 안에 이미지를 넣는다.3. pubspec.yaml 파일에서 assets 폴더를 추가해준다.
4. main.dart파일에서 Image.asset('assets/파일명',height:)를 이용해서 파일을 불러온다.
Map 형태의 데이터 제대로 불러오는 방법.
과거 과제와 현 과제의 차이점.
<Food Recipe>만들 때
List<Map<String, dynamic>> dataList = [
{
"category": "수제버거",
"imgUrl": "https://i.ibb.co/HBGKYn4/foodiesfeed-com-summer-juicy-beef-burger.jpg",
},
<Shazam> 만들때
List로 된 데이터를 Map형태로 받았던 것이 Food Recipe
그냥 Map 데이터로 받는 것이 Shazam이지만
위의 것은 dataList > Map 데이터
아래 것은 chartData > korea > Map 데이터
