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