// main.dart
import 'package:flutter/material.dart';
import 'package:toonflix/widgets/button.dart';
import 'package:toonflix/widgets/currency_card.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFF181818),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 80,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Hey, Selena',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w800,
),
),
Text(
'Welcome back',
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 0.8),
fontSize: 18,
),
),
],
)
],
),
const SizedBox(
height: 70,
),
Text(
'Total Balance',
style: TextStyle(
fontSize: 22,
color: Colors.white.withOpacity(0.8),
),
),
const SizedBox(
height: 5,
),
const Text(
'\$5 194 482',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Button(
text: 'Transfer',
bgColor: Color(0xFFF1B33B),
textColor: Colors.black,
),
Button(
text: 'Request',
bgColor: Color(0xFF1F2123),
textColor: Colors.white,
),
],
),
const SizedBox(
height: 50,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Wallets',
style: TextStyle(
color: Colors.white,
fontSize: 36,
fontWeight: FontWeight.w600,
),
),
Text(
'View All',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 18,
),
),
],
),
const SizedBox(
height: 20,
),
const CurrencyCard(
name: 'Euro',
code: 'EUR',
amount: '6 428',
icon: Icons.euro_rounded,
isInverted: false,
),
Transform.translate(
offset: const Offset(0, -20),
child: const CurrencyCard(
name: 'Bitcoin',
code: 'BTC',
amount: '9 785',
icon: Icons.currency_bitcoin,
isInverted: true,
),
),
Transform.translate(
offset: const Offset(0, -40),
child: const CurrencyCard(
name: 'Dollar',
code: 'USD',
amount: '428',
icon: Icons.monetization_on_outlined,
isInverted: false,
),
),
],
),
),
),
),
);
}
}// button.dart
import 'package:flutter/material.dart';
class Button extends StatelessWidget {
final String text;
final Color bgColor;
final Color textColor;
const Button({
super.key,
required this.text,
required this.bgColor,
required this.textColor,
});
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.circular(45),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 20,
horizontal: 50,
),
child: Text(
text,
style: TextStyle(
color: textColor,
fontSize: 20,
),
),
),
);
}
}// currency_card.dart
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,
});
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: 20,
),
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(
offset: const Offset(0, -20),
child: const CurrencyCard(
name: 'Bitcoin',
code: 'BTC',
amount: '9 785',
icon: Icons.currency_bitcoin,
isInverted: true,
),
),
Transform.translate(
offset: const Offset(0, -40),
child: const CurrencyCard(
name: 'Dollar',
code: 'USD',
amount: '428',
icon: Icons.monetization_on_outlined,
isInverted: false,
),
),
이 코드의 두 부분은 Transform.translate 위젯을 사용하여 화면에 화폐 카드를 배치하는 방법을 보여줍니다:
-
첫 번째
Transform.translate:offset: const Offset(0, -20),: 이 코드는CurrencyCard를 수직으로 위로 20 픽셀 이동시킵니다.Offset(0, -20)는 x축으로 0, y축으로 -20의 변화를 나타냅니다.child: const CurrencyCard( ... ),:CurrencyCard위젯을 자식으로 갖습니다. 이 카드는 비트코인을 나타내며, 이름('Bitcoin'), 코드('BTC'), 금액('9 785'), 아이콘(Icons.currency_bitcoin),isInverted: true속성을 가집니다.isInverted가true이면, 어떤 시각적인 변경이 있을 수 있습니다 (예: 카드의 색상 반전).
-
두 번째
Transform.translate:offset: const Offset(0, -40),: 이 코드는CurrencyCard를 수직으로 위로 40 픽셀 이동시킵니다. 이것은 첫 번째 카드보다 더 위에 위치하도록 만듭니다.child: const CurrencyCard( ... ),: 다른CurrencyCard위젯을 자식으로 갖습니다. 이 카드는 달러를 나타내며, 이름('Dollar'), 코드('USD'), 금액('428'), 아이콘(Icons.monetization_on_outlined),isInverted: false속성을 가집니다. 여기서isInverted가false이므로 첫 번째 카드와 시각적인 차이가 있을 수 있습니다.
이러한 사용은 사용자 인터페이스에서 카드들을 겹치게 표시하거나 시각적인 계층을 만드는데 사용될 수 있습니다.
Transform.scale(
scale: 2.2,
child: Transform.translate(
offset: const Offset(
-5,
12,
),
child: Icon(
icon,
color: isInverted ? _blackColor : Colors.white,
size: 88,
),
),
)이 코드 부분은 Icon 위젯을 변형하여 화면에 표시하는 방법을 설명하고 있습니다. Flutter에서 Transform 위젯은 자식 위젯의 크기, 위치, 회전 등을 조정할 수 있습니다. 여기서는 Transform.scale과 Transform.translate 두 가지 변형을 사용하고 있습니다.
-
Transform.scale:scale: 2.2: 이 속성은 자식 위젯의 크기를 원래의 2.2배로 확대합니다. 여기서는Icon위젯이 기본 크기보다 약 2배 더 크게 표시됩니다.
-
Transform.translate내부의Offset:offset: const Offset(-5, 12):Offset은 자식 위젯의 위치를 x축과 y축으로 얼마나 이동시킬지 결정합니다. 여기서는 x축으로 -5만큼 (왼쪽으로), y축으로 12만큼 (아래로) 이동시키는 것을 의미합니다. 이는Icon의 위치를 약간 조정하여 더 나은 레이아웃을 만듭니다.
-
Icon위젯:icon: 이는 앞서 정의된IconData타입의 변수입니다. 이 변수는 위젯 생성자를 통해 전달되며, 특정 화폐의 아이콘을 나타냅니다.color: 아이콘의 색상은isInverted변수에 따라 결정됩니다.isInverted가 참이면_blackColor(검은색), 거짓이면Colors.white(흰색)이 적용됩니다.size: 88: 아이콘의 기본 크기를 88로 설정합니다. 하지만 실제 화면에 표시되는 크기는Transform.scale에 의해 2.2배 확대되어 표시됩니다.
이렇게 Transform 위젯을 사용하면, 기본 위젯의 크기나 위치를 유연하게 조정할 수 있으며, 이를 통해 더 동적이고 매력적인 사용자 인터페이스를 구성할 수 있습니다.
공부하는 개발자