1. InkWell(잉크병)과 GestureDetector 차이점
둘다 컨테이너를 tap 할 수 있게 해주는 것이다. 차이점은, InkWell은 터치했을 때 잉크가 번져나가듯이 해당 컨테이너가 보이고, GestureDetector는 그런 애니메이션 효과가 안보인다.
- category_grid_item.dart
import 'package:flutter/material.dart';
import 'package:meals/models/category.dart';
class CategoryGridItem extends StatelessWidget {
const CategoryGridItem({
super.key,
required this.category,
});
final Category category;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
splashColor: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
category.color.withOpacity(0.55),
category.color.withOpacity(0.9),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)),
child: Text(
category.title,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Theme.of(context).colorScheme.onBackground,
),
),
),
);
}
}
1) InkWell 추가
2) InkWell 위젯 + 컨테이너 위젯 모두 borderRadius: BorderRadius.circular(16) 추가함. 두 곳 모두 추가한 이유는 InkWell은 터치하면 반응하는것이라 두군데 모두 적용해야지 모서리가 둥글게 계속 유지가 된다.
'코딩강의 > meals_app(플러터-유데미)' 카테고리의 다른 글
162. Adding Navigation to the MealDetails Screen (1) | 2023.10.28 |
---|---|
161. Improving the MealItem Widget (0) | 2023.10.26 |
160. Introducing the Stack Widget (0) | 2023.10.26 |
~159. Passing Data to the Target Screen (1) | 2023.10.09 |
~154. Displaying Category Items on a Screen (1) | 2023.10.08 |