2. 두 번째 페이지
두 번째 페이지의 리스트는 보라색 영역 아래만 스크롤이 가능하다는 걸 염두한다.
SafeArea(
child: Column(
children: [
Text(
'차트',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(height: 16),
Expanded(
child: ListView(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
color: Colors.purple[900],
width: double.infinity,
height: 180,
),
Column(
children: [
ElevatedButton(
onPressed: () {},
child: Text("국가 및 도시별 차트"),
),
SizedBox(height: 8),
Text(
"전 세계",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
)
],
),
Container(
width: double.infinity,
height: 8,
color: Colors.grey[400],
)
],
),
)
],
),
);
Stack을 사용해서 위젯이 중첩이 가능하게 만든다.
보라색 컨테이너는 width를 double.infinity로 너비 전체를 차지하도록 만든다.
버튼의 색상을 변경해야한다.
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
버튼의 색상은 일반 색상과 다르게 MaterialStatePropery를 사용한다.
그리고 버튼의 경우 너비 속성이 없기 때문에 조절하기 위해서는 Container로 한번 감싸야한다. 그리고 기기의 너비에 맞춰서 사이즈가 정해지도록 값을 준다.
Container(
width: MediaQuery.of(context).size.width * 0.8,
child: ElevatedButton
리스트
리스트를 만들기 위한 데이터를 가공한다. 데이터는 맵을 사용 해서 변수로 저장하고 순회하면서 생성되도록 한다.
Row(
children: chartData['korea']!.map((element) {
String imageUrl = element['imageUrl']!;
String name = element['name']!;
String artist = element['artist']!;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width: MediaQuery.of(context).size.width * 0.29,
),
Text(
name,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(artist),
],
);
}).toList(),
데이터는 imageUrl, name, artist로 가공해서 아이템을 만든다. 데이터를 가공할 때 null이 아님을 확인하기 위해 ! 를 붙여준다. 아이템의 위젯들은 모두 좌측에서 시작되도록 start로 정렬시킨다. 이미지의 경우 너비를 기기 사이즈에 맞춰서 변경되도록 한다.
'스파르타 > Flutter' 카테고리의 다른 글
| [Flutter] 패키지 사용법 -( week 3 ) (0) | 2023.04.21 |
|---|---|
| [Flutter] 클론코딩(Shazam) 3.첫번째 페이지 - ( week 2 ) (0) | 2023.04.18 |
| [Flutter] 클론코딩(Shazam) 1.두번째 페이지 - ( week 2 ) (0) | 2023.04.18 |
| [Flutter] 클론코딩(Shazam) - ( week 2 ) (0) | 2023.04.18 |
| [Flutter] 클론 코딩(당근) 마무리 - ( week 2 ) (0) | 2023.04.15 |
