반응형
내가 알고 있기로는... Flutter에 Card라는 위젯이 있는 걸로 기억해서 이거를 말하는 건가 싶었는데, 그냥 Container로 연습시키더라...(이게 맞긴 해)
참고로, Card 위젯이 궁금하면 공식 문서로 가보도록 하자...(나중에 쓸 일이 있기는 할듯?)
https://api.flutter.dev/flutter/material/Card-class.html
Card class - material library - Dart API
A Material Design card: a panel with slightly rounded corners and an elevation shadow. A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc. This is what it lo
api.flutter.dev
왼쪽의 부분을 직접 만들어 보는 강의다.
Container를 이용해서 직접 만들어 본다.
이번에는 딱히 배운 것은 없다. 그냥 지금까지 배웠던 것들을 총동원해서 만든다.
이번에 만든 코드는 다음과 같다:
const SizedBox(
height: 100,
),
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(
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: 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,
),
),
],
),
],
),
],
),
),
),
...그냥 넘어가자
반응형
'앱 만들기 프로젝트 > Flutter' 카테고리의 다른 글
| Flutter - 3.8 Reusable Cards (0) | 2024.10.27 |
|---|---|
| Flutter - 3.7 Icons and Transform (0) | 2024.10.25 |
| Flutter - 3.5 Reusable Widgets (0) | 2024.10.25 |
| Flutter - 3.4 Code Actions (0) | 2024.10.25 |
| Flutter - 3.3 VSCode Settings (0) | 2024.10.25 |