1. 세부 화면 내용을 추가해주자
- meal_item.trait.dart
import 'package:flutter/material.dart';
class MealItemTrait extends StatelessWidget {
const MealItemTrait({super.key, required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Row(
children: [
Icon(
icon,
size: 17,
color: Colors.white,
),
const SizedBox(width: 6),
Text(
label,
style: const TextStyle(color: Colors.white),
),
],
);
}
}
- meal_item.dart
import 'package:flutter/material.dart';
import 'package:meals/models/meal.dart';
import 'package:meals/widgets/meal_item_trait.dart';
import 'package:transparent_image/transparent_image.dart';
class MealItem extends StatelessWidget {
const MealItem({super.key, required this.meal});
final Meal meal;
String get complexityText {
return meal.complexity.name[0].toUpperCase() +
meal.complexity.name.substring(1);
}
String get affordabilityText {
return meal.affordability.name[0].toUpperCase() +
meal.affordability.name.substring(1);
}
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.all(8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
clipBehavior: Clip.hardEdge,
elevation: 2,
child: InkWell(
onTap: () {},
child: Stack(
children: [
FadeInImage(
placeholder: MemoryImage(kTransparentImage),
image: NetworkImage(meal.imageUrl),
fit: BoxFit.cover,
height: 200,
width: double.infinity,
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
color: Colors.black54,
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 44,
),
child: Column(
children: [
Text(
meal.title,
maxLines: 2,
textAlign: TextAlign.center,
softWrap: true,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MealItemTrait(
icon: Icons.schedule,
label: '${meal.duration} min',
),
const SizedBox(
width: 12,
),
MealItemTrait(
icon: Icons.work,
label: complexityText,
),
const SizedBox(
width: 12,
),
MealItemTrait(
icon: Icons.attach_money,
label: affordabilityText,
),
],
)
],
),
),
)
],
),
),
);
}
}
1) getter 부분을 통해서 enum 값의 첫번째 글자만 대문자로 변환되게 해주었다.
- 결과 화면
'코딩강의 > meals_app(플러터-유데미)' 카테고리의 다른 글
| ~164. Adding Tab-based Navigation (0) | 2023.10.29 |
|---|---|
| 162. Adding Navigation to the MealDetails Screen (1) | 2023.10.28 |
| 160. Introducing the Stack Widget (0) | 2023.10.26 |
| ~159. Passing Data to the Target Screen (1) | 2023.10.09 |
| 155. Making any Widget Tappable with InkWell (0) | 2023.10.08 |
