1. Card 형식으로 만들기
약간 더 복잡해 보이지만 눈으로 따라가보면 이해할 수 있는 내용들이다.
import 'package:flutter/material.dart';
import 'package:toonflix/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,
),
const Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
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: 120,
),
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,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Button(
text: "Transfer",
bgColor: Color(0xFFF1B33B),
textColor: Colors.black),
Button(
text: "Request",
bgColor: Color(0xFF1F2123),
textColor: Colors.white),
],
),
const SizedBox(
height: 100,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Wallets",
style: TextStyle(
color: Colors.white,
fontSize: 36,
fontWeight: FontWeight.w600),
),
Text("View",
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 18,
))
],
),
const SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: const Color(0xFF1F2123),
borderRadius: BorderRadius.circular(25),
),
child: 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: 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,
),
)
],
)
],
),
],
),
),
)
],
),
),
),
);
}
}
'코딩강의 > Flutter 로 웹툰 앱 만들기(플러터-노마드코더)' 카테고리의 다른 글
| Reusable Cards (0) | 2023.07.22 |
|---|---|
| Icons and Transforms (0) | 2023.07.22 |
| Reusable Widgets (0) | 2023.07.19 |
| VSC 추가 세팅 + 박스 만들기 (0) | 2023.03.27 |
| Hello world + 화면 레이아웃(개발자 도구) (0) | 2023.03.23 |
