flutter container click

플러터에서 container widget을 클릭하기 위해서는 InkWell 위젯을 사용하면 된다.

그리고, inkwell widget안에  onTap 부분에 클릭하면 수행할 함수/동작을 넣어주면 된다.

InkWell(
      onTap: (){
        Navigator.of(context).pushReplacementNamed('/promise');
      },
        child: Container(
      padding: EdgeInsets.all(10),
      height: 150.0,
      width: 150.0,
      color: Colors.transparent,
      child: Container(
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.2),
              borderRadius: BorderRadius.all(Radius.circular(10.0))),
          child: new Center(
            child: new Text(
              "\nhello",
              style: TextStyle(fontSize: 20, color: Colors.black),
              textAlign: TextAlign.center,
            ),
          )),
    ));

 

 

 

다음의 flutter document를 보고 공부하였다.

 

https://api.flutter.dev/flutter/material/InkWell-class.html

InkWell class - material library - Dart API

플러터 도큐먼트에서 설명하기로는, 

 

InkWell class는 터치에 반응하는 사각형 구역이다.

반드시 Material widget을 ancestor로 가지고 있어야한다. (material widget은 inkwell의 반응이 사실상 그려지는 곳이기 때문)

 

라고 이야기하고 있다.

 

material widget은 간략하게 설명하자면, material design을 말하는 것이고, clipping, elevation, ink effet를 할 수 있다.

clipping : 렌더링을 특정 영역으로 제한

elevation : 쉐도우(그림자) 크기, 색상, 불투명도등을 조절

ink effect :  이미지, 기타 decoration을 그릴 수 있음.