![[Flutter] 12. 쇼핑카트 앱 만들기 (1) - 레이아웃](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A39%3A45.640Z-2bee72d3-33d5-4626-9c8d-649f1efe2088&w=2048&q=75)
bottom sheet 위젯
전체 페이지의 구조?흐름?이 column이니 placeholder → column
사진 연결
앱바 만들기
A→ B화면으로 갈 때 B화면에 앱바가 있으면 뒤로가기 자동으로 생김
다른화면에서 그 화면으로 들어갈때 자동으로 ← 생기고 navigator.pop 으로 뒤로가짐
앱바 메서드로 추출하기
웹과 달리 핸드폰 기준 페이지마다 다 달라서? 페이지마다 만드는게 낫다. → 그러므로 위젯이 아니라 메서드로 추출
이미지 비율 주기
(이미지 + 버튼) 세트의 버튼 만들기
버튼 위젯 → component로 분리
버튼 위치 잡기
spaceEvenly : 띄어쓰기가 동일하다
spaceAround : 나중에 padding을 줄거라서 양옆이 줄어들거라 spaceAround을 사용한다
이미지+버튼 세트 component로 분리하기
하얀색 박스 만들기
흰색은 안보이니까 일단 노란색으로 설정
Container에 color로 색 지정하고 박스 꾸미려고 decoration쓰면 에러 터진다. 그래서 색상이랑 꾸미기 다 하려면 decoration에서 설정해야한다.
상단의 모서리에만 곡선 주기
흰색 박스 내부 레이아웃 잡기
왼쪽 정렬
Row~Row까지를 column으로 묶어서 왼쪽정렬
근데 이제 묶어서 Start, 원래Column은 Center로 잡거나
원래 Column을 Start로 잡고 버튼을 Row로 묶어서 가운데 정렬하거나
align 박스는 double.infinity로 자리 전부 차지한다.
버튼은 align으로 wrap해서 가운데 정렬한다.
흰 박스 내부 만들기(1)
spaceBetween으로 양옆으로 찢어준다.
흰 박스 내부 만들기(2)
TextSpan : 옆으로 흘러가는 텍스트 여러개를 만들 때 쓴다.
Spacer로 찢어주기
Spacer : 남는 자리 전부 차지
위의 텍스트도 그냥 spaceBetween 말고 Spacer로 통일
흰 박스 내부 만들기(3) - 색상 선택 그림
흰색 동그라미를 테두리로 검은색 동그라미 있으므로 Container 안에 Container
근데 분명 크기를 흰색 동그라미보다 작게 했는데 적용 안되는 문제 발생!
Stack으로 Container 제약조건 문제 해결하기
흰 원 도화지 위에 검은 원 도화지를 쌓을 거야 → Stack으로
Stack은 Postioned과 쌍이다.
Absolute postition?과 비슷
Positioned: 위치를 잡아준다. → 위의 부모에게 종속되어있다.
부모 기준으로 자리를 top, left 등으로 잡아준다.
Stack 위젯 → Component로 분리하기
ColorIcon 사이 띄우기
Padding 위젯 : CSS와 다르게 내부가 아니라 외부에 박스가 있고 그 박스와 아이템 사이에 여백이 생기는 것
padding영역 = inset 영역 = 그림을 그릴 수 없는 영역
colorIcon을 모듈화 해서 여백을 주고싶은 경우에만 줄 수 잇도록 선택적 매개변수로 설정
버튼 만들기
SizedBox 로 설정 가능
근데 다른 방법으로 할거예용
이 방법으로는 안됨 ㅠㅠ
최솟값이 정해져있으면 최대가 double.infinity여도 최소에 double.infinity가 맞춰짐
double w = MediaQuery.of(context).size.width 이런식으로 화면 사이즈 변수로 받아오면 그걸로 설정 → 반응형으로 사용 가능
디바이스의 크기가 너무 다양해서 플러터 스크린 유틸리티라는 라이브러리를 쓰면 화면과 글꼴을 조절하는 플러터 플러그인으로 화면에 맞춰서 조절가능 → 근데 내가 일단 직접 해봐야 이해하고 할 수 있음
전체 위치 조정
이미지 모서리 자르기
헤더의 양옆 여백
헤더 내부 버튼 여백
흰 박스 내부 여백
흰박스 아이템들 사이 여백
흰 박스 위젯 → Component로 분리하기
Share article
![[Flutter] 14. 쇼핑카트 앱 만들기 (3) - Riverpod으로 상태 관리](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A39%3A14.456Z-1ae5293d-43b7-47e1-a60e-e059aa782edc&w=750&q=75)
![[Flutter] 13. 쇼핑카트 앱 만들기 (2) - 상태 관리](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A39%3A20.012Z-380010af-d967-4e8a-b4fb-c5dffb52f4a1&w=750&q=75)
![[Flutter] 11. Riverpod](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A39%3A58.178Z-705b5b18-324e-42ad-9a7f-b0b86ae9459d&w=750&q=75)
![[Flutter] 10. 상태](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A40%3A02.944Z-6813de2d-aac0-49d0-85bd-f1acc3a16218&w=750&q=75)