//두번쨰 탭
class SecondTab extends StatelessWidget {
const SecondTab({Key? key})
: super(key: key); //SecondTab을 Stateless위젯으로 생성
@override
Widget build(BuildContext context) {
return Container(
//배경1. 전체 박스를 컨테이너로 묶음
decoration: BoxDecoration(
gradient: LinearGradient(
//배경2. 배경에 그라디언트 효과를 주는 컴포넌트. 2가지 이상의 색상으로 그라디언트 효과를 나타낼 수 있다.
begin: Alignment.topCenter, //탑센터부터
end: Alignment.bottomCenter, //바텀센터까지
colors: [
Colors.blue[300]!,
Colors.blue[900]!
], //배경3. 블루300~ 블루900 점점 진해진다.
)),
child: SafeArea(
//7. SafeArea를 이용. 여백을 확보해서 가려지는부분 없애줌.
child: Column(
//6. 전체를 Cloumn으로 묶는다.
children: [
Padding(
// 5. 라이브러리와 차트 위치조정을 위해 패딩으로 묶어줌
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
child: Row(
//3. 라이브러리와 차트를 가로배치하기위해서 Row 사용
children: [
GestureDetector(
// 2. 라이브러리 아이콘+텍스트를 버튼으로 만들어줌
onTap: () {
DefaultTabController.of(context).animateTo(0);
},
child: Column(
//1. 라이브러리 아이콘+텍스트를 만들어줌
children: [
Icon(
Icons.person,
color: Colors.white,
),
Text(
"라이브러리",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
)
],
),
),
Spacer(), //Spacer()은 위젯과 위젯사이의 간격 조절. (예) Spacer(flex: 2)
GestureDetector(
// 4. 1~3번과정과 동일하게 차트의 아이콘+텍스트를 만들어줌
onTap: () {
DefaultTabController.of(context).animateTo(2);
},
child: Column(
children: [
Icon(
Icons.show_chart,
color: Colors.white,
),
Text(
"차트",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
],
),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.1),
// MediaQuery클래스의 of(context)를 사용하면
//현재 화면의 MedaQueryData가 변경될때마다 위젯이 자동으로 리빌딩 된다.
//빌드 위젯 내에 위치하여야한다. 그렇지 않을경우 null값을 반환한다.
// MediaQuery.of(context).size 앱 화면 크기
// MediaQuery.of(context).size.height 앱 화면 높이
// MediaQuery.of(context).size.width 앱 화면 넓이
// MediaQuery.of(context).devicePixelRatio 앱 화면 비율
Text(
//8. 텍스트 만들기
"Shazam하려면 탭하세요",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.06),
Container(
//9. 시야를 좀 크게보자. 순서대로 배경과 이미지불러오기
alignment: Alignment.center, // Alignment: 정렬 , 즉 중앙정렬
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue[300],
shape: BoxShape.circle,
),
child: Image.network(
color: Colors.white,
width: 130,
height: 130,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.12,
),
Container(
//10. 9번과 동일하게 작성
width: 50,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue[400],
shape: BoxShape.circle,
),
child: Icon(
Icons.search,
color: Colors.white,
size: 30,
),
),
],
),
),
);
}
}
배경 1. 전체 박스를 컨테이너로 묶음.
-> 배경 2. 배경에 그래디언트 효과를 준다.
-> 배경 3. 블루300~ 블루900 점점 진해진다.
7. SafeArea를 이용해서 가려지는 부분 없애줌
-> 6. 전체를 Cloumn으로 묶는다.
-> 5. 라이브러리와 차트 위치조정할것을 생각해서 Padding으로 미리 묶어줌
-> 3. 라이브러리와 차트를 가로 배치
-> 2,1. 라이브러리의 아이콘+텍스트 버튼 생성
-> 4. 1~3과정과 동일하게 차트의 아이콘+텍스트를 만들어줌
-> 8. 텍스트 만들기.
-> 9,10. 순서대로 배경과 이미지 불러오기
'Flutter.Study' 카테고리의 다른 글
| 2주차(번외) (0) | 2023.07.01 |
|---|---|
| 2주차(4)- Third Tab(shazam) (0) | 2023.07.01 |
| 2주차(2)- First Tab(shazam) (0) | 2023.06.30 |
| 2주차(1)- 뼈대(shazam) (0) | 2023.06.30 |
| 1주차(3)-body(movie_reviews) (0) | 2023.06.29 |
