코딩강의/Flutter 로 웹툰 앱 만들기(플러터-노마드코더)
Reusable Cards
김마드
2023. 7. 22. 20:11
먼저 화면이 넘어가면 스크롤이 가능하게끔 해주어야 한다. body에 SingleChildScrollView를 추가해주면 된다.
body: SingleChildScrollView(
child: Padding(
1. 재사용 가능한 카드를 만들어 보자.
아래 코드내용들을 보면 이해가 된다. 다른 새로운 개념은 없고 삼항연산자를 이용해서 invert된 값에 따라서 색을 다르게 할 수 있게 해주었다.
import 'package:flutter/material.dart';
class CurrencyCard extends StatelessWidget {
final String name, code, amount;
final IconData icon;
final bool isInverted;
final _blackColor = const Color(0xFF1F2123);
const CurrencyCard({
super.key,
required this.name,
required this.code,
required this.amount,
required this.icon,
required this.isInverted,
});
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: isInverted ? Colors.white : _blackColor,
borderRadius: BorderRadius.circular(25),
),
child: 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: 10,
),
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,
),
),
)
],
),
),
);
}
}
그리고, 카드가 곂칠 수 있도록, 이전에 사용했던 Transform.translate를 이용한다.
Transform.translate(
offset: const Offset(0, -20),
child: const CurrencyCard(
name: "Bitcoin",
code: "BTC",
amount: "9 728",
icon: Icons.currency_bitcoin,
isInverted: true,
),
),
아래는 결과 값.
