Flutter
[Flutter] UI 그리기 연습(4) - 카드 만들기
건물주개발자
2023. 7. 25. 01:19
- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다.
https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App
Financial Mobile IOS App
dribbble.com
- 코드 설명 (코드 작성 순서로)
- 카드를 만들기전에 "Wallets", "View All" 텍스트를 넣어야 한다. Row 위젯을 선언하고, children 속성안에 Text 위젯 두개를 넣는다.
- 텍스트 위젯을 떨어뜨리기 위해 mainAxisAlignment 속성에 MainAxisAlignment.spaceBetween값을 넣고, Row의 바닥에 두 텍스트를 위치시키기 위해 crossAxisAlignment 속성에 CrossAxisAlignment.end 값을 넣어 정렬한다.
- 카드를 만들기 위해 Container 위젯을 선언하고 컨테이너의 색과 둥근 모서리를 주기 위해 decoration 속성에 BoxDecoration 위젯을 사용한다. BorderRadius.circular로 둥근 정도를 조정한다.
- Container 위젯안, child 속성에 텍스트와 이미지를 넣기 위한 Row 위젯(1)을 사용한다. Row 위젯(1)의 children 속성에 텍스트를 위, 아래로 넣기 위해 Column 위젯(1)을 넣는다.
- 다시 Column 위젯(1)의 children 속성에 "Euro" 텍스트를 넣기 위한 Text위젯과 글 사이를 띄우기 위한 SizedBox위젯, "6 428 EUR" 텍스트를 넣기 위해 다시한번 Row 위젯(2)을 선언한다.
- Row 위젯(2)안에 "6 428 EUR" 을 위한 Text 위젯, SizedBox 위젯을 사용한다. Column 위젯(1)에 위, 아래에 있는 두 텍스트 위젯을 왼쪽 정렬하기 위해 crossAxisAlignment 속성에 CrossAxisAlignment.start값을 사용한다.
- 이미지를 넣기 위해 Row 위젯(1)의 children 속성 안에 Transform.scale를 사용하고 scale 속성을 지정하여 Container의 범위를 벗어날 만큼의 크기를 설정한다. Transform.scale의 child 속성에 Icon 위젯을 사용하여 유로 아이콘을 넣고 아이콘의 위치를 옮기기 위해 Icon 위젯을 Transform.translate 위젯으로 감싸준다. Transform.translate의 속성인 offset값을 좌표로 설정한다.
- Row 위젯(1)을 Padding 위젯으로 감싸면서 네 모서리에 패딩을 준다. 마지막으로 Container의 clipBehavior 속성값을 Clip.hardEdge으로 설정함으로써 유로 이미지가 바깥으로 나간것은 잘리게 한다.
- 끝!
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_application_1/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: [
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.4),
fontSize: 18,
),
),
],
),
],
),
const SizedBox(
height: 70,
),
const Text(
"Total Balance",
style: TextStyle(
fontSize: 22,
color: Colors.white,
),
),
const SizedBox(
height: 5,
),
const Text(
"\$ 5 194 382",
style: TextStyle(
fontSize: 48,
color: Colors.white,
),
),
const SizedBox(
height: 30,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(
text: "Transfer",
bgColor: Color(0xFFF1B33B),
textColor: Colors.black,
),
Button(
text: "Request",
bgColor: Color(0xFF1F2123),
textColor: Colors.white,
),
],
),
const SizedBox(
height: 30,
),
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.6),
fontSize: 18,
),
),
],
),
const SizedBox(
height: 30,
),
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.all(25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Euro",
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 10,
),
Row(
children: [
const Text(
"6 428",
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
width: 5,
),
Text(
"EUR",
style: TextStyle(
fontSize: 20,
color: Colors.white.withOpacity(0.8),
),
),
],
)
],
),
Transform.scale(
scale: 2.2,
child: Transform.translate(
offset: const Offset(-5, 12),
child: const Icon(
Icons.euro_rounded,
size: 88,
color: Colors.white,
),
),
),
],
),
),
),
],
),
),
),
);
}
}// lib/widgets/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,
});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.circular(45),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15),
child: Text(
text,
style: TextStyle(
fontSize: 20,
color: textColor,
),
),
),
);
}
}- UI 그리기 연습(4) 완성본
출처