코딩강의/meals_app(플러터-유데미)
160. Introducing the Stack Widget
김마드
2023. 10. 26. 12:57
1. meal 아이템을 터치하면 세부 내용을 보여주자
먼저 dart package에서 flutter pub add transparent_image를 다운받아주자
- meal_item.dart
import 'package:flutter/material.dart';
import 'package:meals/models/meal.dart';
import 'package:transparent_image/transparent_image.dart';
class MealItem extends StatelessWidget {
const MealItem({super.key, required this.meal});
final Meal meal;
@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,
),
const Row(
children: [],
)
],
),
),
)
],
),
),
);
}
}
1) FadeInImage를 활용해서 화면을 누르면 이미지가 투명->이미지로 보여지게끔해보자.
여기서 kTransparentImage가 다트 패키지에서 다운받은 것이다.
- meals.dart
import 'package:flutter/material.dart';
import 'package:meals/models/meal.dart';
import 'package:meals/widgets/meal_item.dart';
class MealsScreen extends StatelessWidget {
const MealsScreen({
super.key,
required this.title,
required this.meals,
});
final String title;
final List<Meal> meals;
@override
Widget build(BuildContext context) {
Widget content = Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Uh oh ... nothing here!',
style: Theme.of(context).textTheme.headlineLarge!.copyWith(
color: Theme.of(context).colorScheme.onBackground,
),
),
const SizedBox(height: 16),
Text(
'Try selecting a different category!',
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
color: Theme.of(context).colorScheme.onBackground,
),
),
],
),
);
if (meals.isNotEmpty) {
content = ListView.builder(
itemCount: meals.length,
itemBuilder: (ctx, index) => MealItem(meal: meals[index]),
);
}
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: content,
);
}
}
1) MealItem 위젯 사용