반응형
이번에는 아래의 사진 부분을 만들어본다고 한다.
이번에 추가한 부분은 다음과 같다:
SizedBox(
height: 120,
),
Text(
'Total balance',
style: TextStyle(
fontSize: 22,
color: Colors.white.withOpacity(0.8),
),
),
SizedBox(
height: 5,
),
Text(
// dart에서 $는 변수를 가져올때 사용하므로 \를 붙여줘야 한다.
'\$5 194 482',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
SizedBox(
height: 30,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFF2B33A),
borderRadius: BorderRadius.circular(45),
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 20,
horizontal: 40,
),
child: Text(
'Transfer',
style: TextStyle(fontSize: 20),
),
),
),
],
),
아직 버튼은 'Transfer'만 추가했으며, Container라는 위젯을 이용해서 버튼을 만든 모습이다.
Row를 이용해서 Transfer 버튼 오른쪽에 들어올 버튼 자리를 미리 만들어 두었다.
Padding을 통해 공간을 만들고 그 안에 Text를 넣어줬으며, Container의 decoration을 이용해서 둥글게 마감처리 되도록 한다.
그 결과는 아래와 같다.
전체 코드:
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xFF181818),
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox: 빈 박스
SizedBox(
height: 80,
),
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: Colors.white.withOpacity(0.8),
fontSize: 18,
),
),
],
),
],
),
SizedBox(
height: 120,
),
Text(
'Total balance',
style: TextStyle(
fontSize: 22,
color: Colors.white.withOpacity(0.8),
),
),
SizedBox(
height: 5,
),
Text(
// dart에서 $는 변수를 가져올때 사용하므로 \를 붙여줘야 한다.
'\$5 194 482',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
SizedBox(
height: 30,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFF2B33A),
borderRadius: BorderRadius.circular(45),
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 20,
horizontal: 40,
),
child: Text(
'Transfer',
style: TextStyle(fontSize: 20),
),
),
),
],
),
],
),
),
),
);
}
}
반응형
'앱 만들기 프로젝트 > Flutter' 카테고리의 다른 글
| Flutter - 3.4 Code Actions (0) | 2024.10.25 |
|---|---|
| Flutter - 3.3 VSCode Settings (0) | 2024.10.25 |
| Flutter - 3.1 Developer Tools (0) | 2024.10.24 |
| Flutter - 3.0 Header (1) | 2024.10.23 |
| Flutter - 2.3 Hello World (7) | 2024.10.18 |