반응형
몇가지 새로운 부분만 체크하고 넘어갈 것이다.
아래의 사진 부분을 완성했다.
- ClipBehavior: Container에서 어떤 아이템이 overflow가 되었을 때 어떻게 동작할 지 알려주는 것
- 여기에서는 Clip.hardEdge로 그냥 잘라버리도록 했다.
- antiAlias, antiAliasWithSaveLayer, hardEdge, none이 있다.
- Transform.scale(): 아이콘의 크기만 키우는 것(만약 size를 키우면 container도 같이 커진다.)
- Transform.translate(): 위치 이동하는 것.(offset)
main.dart의 전체 코드는 다음과 같다.
import 'package:flutter/material.dart';
import './widgets/button.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFF181818),
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox: 빈 박스
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: Colors.white.withOpacity(0.8),
fontSize: 18,
),
),
],
),
],
),
const SizedBox(
height: 60,
),
Text(
'Total balance',
style: TextStyle(
fontSize: 22,
color: Colors.white.withOpacity(0.8),
),
),
const SizedBox(
height: 5,
),
const Text(
// dart에서 $는 변수를 가져올때 사용하므로 \를 붙여줘야 한다.
'\$5 194 482',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
const SizedBox(
height: 30,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Button(
text: 'Transfer',
bgcolor: Color(0xFFF2B33A),
textColor: Colors.black,
),
Button(
text: 'Request',
bgcolor: Color(0xFF1F2123),
textColor: Colors.white,
),
],
),
const SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
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,
),
Container(
// clipBehavior: 어떤 아이템이 overflow가 되었을 때 어떻게 동작할지 알려주는 것.
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(25),
),
child: Padding(
padding: const EdgeInsets.all(30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Euro',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
const SizedBox(
height: 10,
),
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),
fontSize: 20,
),
),
],
),
],
),
// 그냥 size를 키우면 카드가 같이 커진다.
// transform.scale으로 크기만 키우자.
Transform.scale(
scale: 2.2,
// transform.translate으로 icon 위치 이동하기.
child: Transform.translate(
offset: const Offset(-5, 12),
child: const Icon(
Icons.euro_rounded,
color: Colors.white,
size: 88,
),
),
),
],
),
),
),
],
),
),
),
);
}
}
반응형
'앱 만들기 프로젝트 > Flutter' 카테고리의 다른 글
| Flutter - 4.0 State (0) | 2024.10.27 |
|---|---|
| Flutter - 3.8 Reusable Cards (0) | 2024.10.27 |
| Flutter - 3.6 Cards (1) | 2024.10.25 |
| Flutter - 3.5 Reusable Widgets (0) | 2024.10.25 |
| Flutter - 3.4 Code Actions (0) | 2024.10.25 |