본문 바로가기

코딩강의/meals_app(플러터-유데미)

155. Making any Widget Tappable with InkWell

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은 터치하면 반응하는것이라 두군데 모두 적용해야지 모서리가 둥글게 계속 유지가 된다.