![](/_astro/cover.C9uvb2OK.jpeg)
Flutter: เพิ่ม Feedback สไตล์ Material ให้กับ Widget ด้วย InkWell
Published on
Authored by Pete. Pittawat Taveekitworachai.
ไม่ใช่ทุกปุ่มและการ์ดที่เตรียมมาให้เราใช้งานใน Flutter จะตอบโจทย์การออกแบบได้ทั้งหมด Flutter เองก็ตระหนักถึงความต้องการนี้ดี จึงมี Widget ที่ชื่อว่า GestureDetector
มาให้เพื่อมอบ Flexbility ให้มากที่สุดเท่าที่เป็นไปได้กับ Developer ในการรังสรรค์ UI อันสวยงามขึ้นมา แต่อย่างไรก็ตาม GestureDetector
แม้ว่าจะมาพร้อมกับความสามารถสารพัด แต่ก็ไม่ตอบโจทย์เสมอไป เพราะตัว GestureDetector
เองนั้นสามารถตรวจจับ Gesture ได้เท่านั้น แต่ไม่มี Feedback animation ตอบกลับไปยังผู้ใช้งาน หากเราต้องการ GestureDetector
ที่มี Feedback เป็น Splash สวย ๆ ตาม Material Design แล้ว ทาง Flutter ก็ได้เตรียม Widget มาไว้ให้เช่นกันในชื่อ InkWell
อย่างไรก็ตาม InkWell
เป็นหนึ่งใน Widget ที่ถือเป็นยาขมสำหรับใครหลาย ๆ คน เพราะเมื่อเรานำไปใช้งานแล้วกลับไม่มี Effect อะไรเกิดขึ้นมา วันนี้เราจะมาดูกันว่าการใช้งาน InkWell
ที่ถูกต้องควรใช้อย่างไร
InkWell
InkWell
มีความคล้ายกับ GestureDetector
อยู่ค่อนข้างมาก แต่ดีกว่าตรงที่มาพร้อมกับ Effect สวย ๆ ที่เป็น Feedback ให้ผู้ใช้ตาม Material Design อย่างไรก็ตาม InkWell
ก็มาพร้อมกับข้อจำกัดที่ตัว Effect จะถูก Clip ไปตามรูปทรงของสี่เหลี่ยมเท่านั้น หากเราอยากได้ Effect ที่ Flexible มากยิ่งขึ้นก็ต้องใช้ InkResponse แทน
InkWell
เป็นหนึ่งใน Widget ที่ใช้ยากหากไม่เข้าใจมัน เพราะเอาไป Wrap Text
ก็จะได้ FlatButton
สวย ๆ มา แต่เมื่อเอาไป Wrap Container
ที่มีพื้นหลังเมื่อไรกลับหายไปในทันใด สาเหตุหนึ่งเป็นเพราะตัว Material (ชื่อ Widget จริง ๆ เป็น Widget ที่เป็นพื้นฐานของ Widget หลาย ๆ ตัวในตระกูล Material Widget ด้วย) ที่ถูกใช้ในการวาด Effect ถูกซ้อนอยู่ใต้สี/รูปของพื้นหลังนั่นเอง เราสามารถ Workaround ได้ด้วยการมี Material
มา Wrap InkWell
อีกครั้งก่อนและให้ Container
อยู่ข้างนอกสุด โดย Material
ที่เรานำมา Wrap เราสามารถตั้ง type
ให้เป็น MaterialType.transparency
ได้ เพื่อไม่ให้มีผลกับการแสดงผลของ Widget ที่เราตั้งใจไว้ และเป็นพื้นที่สำหรับวาด Effect เท่านั้น ตามตัวอย่าง
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 64,
height: 64,
color: Colors.blueAccent,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {
print('Tapped!');
},
),
),
),
),
);
}
}
RoundedRectangle
แต่ปัญหายังไม่หมดเพียงเท่านั้นเพราะหากเรานำ InkWell
ไปใช้กับ Container
ที่มีการตั้ง borderRadius
ไว้ InkWell
มันจะไม่ได้โดน Clip ไปด้วย วิธีแก้คือให้เราใส่ borderRadius
ให้กับ InkWell ด้วย ดังนี้
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(16)),
color: Colors.blueAccent,
),
width: 64,
height: 64,
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(16)),
onTap: () {
print('Tapped!');
},
),
),
),
),
);
}
}
Circle
แล้วหากเราต้องการใช้ InkWell
กับรูปทรงแปลก ๆ ละ? เช่น Path ที่เราวาดเอง? Widget ที่จะมาช่วยเราในครั้งนี้ก็คือ Widget ตระกูล Clip นั่นเอง หากเรานำ Clip ไป Wrap ไว้ที่ Material
เราจะสามารถจำกัดตัว Effect ให้ถูก Clip ตามที่เราต้องการได้ เช่นหาก Widget ที่เป็น Parent ของ Material
เป็นวงกลม เราสามารถใช้ ClipOval
ในการจัดการได้ ตามตัวอย่างนี้
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blueAccent,
),
width: 64,
height: 64,
child: ClipOval(
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {
print('Tapped!');
},
),
),
),
),
),
);
}
}
ซึ่งไอเดียเดียวกันนี่ สามารถประยุกต์ใช้กับรูปทรงอื่น ๆ ได้ ตามที่เราต้องการ หากเป็นรูปทรงแปลก ๆ ClipPath
จะเป็นตัวช่วยเราได้อย่างดีนั่นเอง