Flutter/API - InkWell

터치에 반응하는 Material의 직사각형 영역을 의미합니다.

스플래쉬 애니메이션을 클립하지 않는 Inkwell의 이형을 사용하고 싶다면, InkResponse를 참고하세요.

다음 다이어그램은 디폴트값을 사용했을 때, InkWell이 탭되면 어떻게 반응하는지 보여줍니다.

InkWell은 반드시 Material 위젯을 조상으로 가져야합니다. Material 위젯은 ink 반응이 실제로 페인트되는 곳입니다.

This matches the Material Design premise wherein the Material is what is actually reacting to touches by spreading ink.

 

만약 위젯이 Inkwell 클래스를 바로으로 사용하면, 해당 위젯의 build 함수의 맨 위에 다음과 같은 함수를 호출하도록 해야합니다. debugCheckHasMaterial:

assert(debugCheckHasMaterial(context));

Troubleshooting

Ink 스플래쉬가 보이지 않아요!

만약 Material 위젯과 InkWell 위젯 사이에 Container, Image, or DecoratedBox을 사용해서 페인트 되는 불투명한 그래픽이 있다면, 스플래쉬 애니메이션이 해당 그래픽 밑에 발생하여 보이지 않을 수 있습니다. 이는 잉크가 어떠한 재료의 내부에 퍼지는 것처럼 ink 스플래시가 Material 자체에 그려지기 때문입니다.

 

이미지나 데코레이션이 잉크 아래의 Material 자체에도 그려지도록 하기 위해 Ink 위젯을 Image, Container, 또는 DecoratedBox 대신 사용할 수 있습니다.

 

불투명한 CustomPaint 위젯을 사용하는 것과 같은 여러가지 이유로 ink 스플래쉬가 보이지 않는다면, 해당 불투명한 위젯 위, InkWell 아래에 Material를 사용해보세요. Material의 종류인 MaterialType.transparency가 이런 목적으로 사용됩니다.

InkWell은 적절하게 클리핑하지 않습니다

Inkwell이나 Ink 위젯을 클립하고 싶다면, Ink가 페인트되는 Material를 사용해 클리핑을 구현해야합니다. 다시 말하면 Ink 위젯을 클리핑 위젯에 직접적으로 사용하는 것이 Material은 클립하지 않기 때문에 불가능하다는 말입니다.

 

간단한 솔루션으로는 Material에서 클립하고 싶은 Ink 위젯을 의도적으로 wrap하고, 대신 클리핑할 위젯으로 wrap하는 것 입니다. Ink에서 예제를 볼 수 있습니다.

Ink 스플래쉬는 animated container의 사이즈를 따라 생성되지 않습니다

InkWell의 스플래쉬가 발생하는 도중에 InkWell의 조상 Material의 크기가 변화하면, 스플래쉬가 적절하게 클리핑되지 않는 모습을 볼 수 있습니다. 이런 현상은 피할 수 없습니다.

InkWell의 스플래쉬는 애니메이션이 진행되는 동안에 스플래쉬가 랜더링되는 Material의 사이즈의 변화에 적절하게 순응하도록 업데이트하지 않습니다. 사이즈가 변하는 Material에 InkWell를 사용하는 것을 피하세요.

 

See also:

• GestureDetector, for listening for gestures without ink splashes.
• ElevatedButton and TextButton, two kinds of buttons in Material Design.
• InkResponse, a variant of InkWell that doesn't force a rectangular shape on the ink reaction.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• InkResponse
• InkWell

Constructors

InkWell({
Key? key, 
Widget? child, 
GestureTapCallback? onTap, 
GestureTapCallback? onDoubleTap, 
GestureLongPressCallback? onLongPress, 
GestureTapDownCallback? onTapDown, 
GestureTapUpCallback? onTapUp, 
GestureTapCallback? onTapCancel, 
ValueChanged<bool>? onHighlightChanged, 
ValueChanged<bool>? onHover, 
MouseCursor? mouseCursor, 
Color? focusColor, 
Color? hoverColor, 
Color? highlightColor, 
MaterialStateProperty<Color?>? overlayColor, 
Color? splashColor, 
InteractiveInkFeatureFactory? splashFactory, 
double? radius, 
BorderRadius? borderRadius, 
ShapeBorder? customBorder, 
bool? enableFeedback = true, 
bool excludeFromSemantics = false, 
FocusNode? focusNode, 
bool canRequestFocus = true, 
ValueChanged<bool>? onFocusChange, 
bool autofocus = false, 
MaterialStatesController? statesController
})