3.6 Cards
이런 카드를 만들어보자
Wallet View all 추가 및 정렬
backgroundColor.Colors.white.withOpacity(0.8),
withOpacity를 가지고 있으면 const배열에 넣으면 안된다.
SizedBox를 주고 Row에 작성한 Text를 떨어뜨려야한다.
어떻게 해야할까?
mainAxisAlignment: MainAxisAlignment.spaceBetween
위 방법으로 하게되면 View All이 Center 기준으로 정렬된다.
그렇기에
crossAxisAlignment: CrossAxisAlignment.end
를 해주면 세로 정렬이 가능하고
mainAxisAlignment: MainAxisAlignment.spaceBetween,
이걸 다시 추가해주면
이와 같이 !!!! 나오는것을 확인할 수 있다.
아하 ! ROW에서 세로축을 담당하는건 Cross!, 가로를 담당하는건 Main!!!
Column에서는 반대구나!
카드 컴포넌트 만들기
Container(
child: Row(
children: [
Column(children: [
const Text("Euro"),
const SizedBox(
height: 15,
),
Row(
children: const [
Text('6 428'),
Text("EUR"),
],
)
]),
],
),
)위와 같이 만들면 배치는 끝이다.
이제 레이아웃을 하자
Container(
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(25),
),
child: Padding(
// padding
padding: const EdgeInsets.all(20),
child: Row(
children: [
Column(children: [
const Text(
"Euro",
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 15,
),
Row(
children: [
const Text(
'6 428',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
Text("EUR",
style: TextStyle(
color: Colors.white.withOpacity(0.8),
)),
],
)
]),
],
),
),
)위와 같이 카드 모양 만들어주고 색칠해주고 텍스트마다 스타일 줬다.
그럼 레이아웃을 더 자세히보자
crossAxisAlignment: CrossAxisAlignment.start
주면 된다!
Container(
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(25),
),
child: Padding(
// padding
padding: const EdgeInsets.all(30),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Euro",
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 15,
),
Row(
children: [
const Text(
'6 428',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
const SizedBox(
width: 5,
),
Text("EUR",
style: TextStyle(
color: Colors.white.withOpacity(0.8),
)),
],
)
]),
],
),
),
)이렇게 하면
여기까지 완성이다!
3.7 Icons and Transforms
아이콘 가져오기
const Icon(
Icons.euro_rounded,
color: Colors.white,
size: 98,
)뭐 다른거 설치 없이.. Icons를 가져오면 된다 대박
아이콘 아래로
Transform.scale 로 크기를 키우고
Transform.translate 로 아래로 보낸다
이제 넘치는걸 잘라보자
넘치는 부분 자르기
Container에
clipBehavior: Clip.hardEdge,
속성을 주면
위와 같이 넘치는 부분을 잘라낼 수 있다!!
3.8 Reusable Cards
위젯 만들기
우선
class CurrencyCard extends StatelessWidget{
}을 하고..
build 명령어를 사용한 후 안에 내용들을 지워준다.
그 다음 return 뒤에 Container를 넣어주고
final String name, code, amount;
final IconData icon;필요한 변수들 작성후
const CurrencyCard(
{super.key,
required this.name,
required this.code,
required this.amount,
required this.icon});자동완성 후 상수를 변수로 바꿔주면 끝이다!!
import 'package:flutter/material.dart';
class CurrencyCard extends StatelessWidget {
final String name, code, amount;
final IconData icon;
const CurrencyCard(
{super.key,
required this.name,
required this.code,
required this.amount,
required this.icon});
Widget build(BuildContext context) {
return Container(
// overflow 됐을때 어떻게 하는지 설정하는 ClipBehavior
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(25),
),
child: Padding(
// padding
padding: const EdgeInsets.all(30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(
name,
style: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 15,
),
Row(
children: [
Text(
amount,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
),
const SizedBox(
width: 5,
),
Text(code,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
)),
],
)
]),
Transform.scale(
scale: 2.2,
child: Transform.translate(
offset: const Offset(-5, 12),
child: Icon(
icon,
color: Colors.white,
size: 88,
),
))
],
),
),
);
}
}색상변경
이와 같이 isInverted를 통해 색상 변경이 가능하며, _ 를 통해서 private membe 를 만들 수 있다.
import 'package:flutter/material.dart';
class CurrencyCard extends StatelessWidget {
final String name, code, amount;
final IconData icon;
final bool isInverted;
// 검정색
// _ : private
final _blackColor = const Color(0xFF1F2123);
const CurrencyCard({
super.key,
required this.name,
required this.code,
required this.amount,
required this.icon,
required this.isInverted,
});
Widget build(BuildContext context) {
return Container(
// overflow 됐을때 어떻게 하는지 설정하는 ClipBehavior
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: isInverted ? Colors.white : _blackColor,
borderRadius: BorderRadius.circular(25),
),
child: Padding(
// padding
padding: const EdgeInsets.all(30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(
name,
style: TextStyle(
color: isInverted ? _blackColor : Colors.white,
fontSize: 32,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 15,
),
Row(
children: [
Text(
amount,
style: TextStyle(
color: isInverted ? _blackColor : Colors.white,
fontSize: 20,
),
),
const SizedBox(
width: 5,
),
Text(code,
style: TextStyle(
color: isInverted
? _blackColor
: Colors.white.withOpacity(0.8),
fontSize: 20,
)),
],
)
]),
Transform.scale(
scale: 2.2,
child: Transform.translate(
offset: const Offset(-5, 12),
child: Icon(
icon,
color: isInverted ? _blackColor : Colors.white,
size: 88,
),
))
],
),
),
);
}
}SingleChildScrollView 를 통해서 유저가 스크롤 가능하게 만들 수 있다.
그런데 스크롤 안해도 한눈에 다 보이게 하고싶으니
Transform.translate(
offset: const Offset(0, -20),
child: const CurrencyCard(
name: "Bitcoin",
code: "BTC",
amount: "9 785",
icon: Icons.currency_bitcoin_rounded,
isInverted: true,
),
),
Transform.translate(
offset: const Offset(0, -40),
child: const CurrencyCard(
name: "Dollar",
code: "USD",
amount: "428",
icon: Icons.attach_money_outlined,
isInverted: false,
),
),
],Transform.translate 속성을 줘서 아이콘을 아래로 내린다.
hardEdge이 속성 또한 줘서 
이와 같이 만들 수 있다.
Developing For Our Lives, 세상에 기여하는 삶을 살고자 개발하고 있습니다