InkWellは、タップジェスチャーを検出して、表示されるウィジェットにインクスプラッシュエフェクトを追加することができるウィジェットです。タップすると、ウィジェットがインクスプラッシュエフェクトで拡大し、その後徐々に消えます。
以下は、InkWellの基本的な使い方と、サンプルコードの例です。
目次
基本的な使い方
InkWellウィジェットをインポートします。
import 'package:flutter/material.dart';InkWellを使用したいウィジェットを作成します。
Widget customButton() {
return InkWell(
child: Container(
padding: EdgeInsets.all(12.0),
child: Text('Button'),
),
onTap: () {
print('Button tapped');
},
);
}InkWellウィジェットのプロパティを設定します。
child: ウィジェットの表示内容を指定します。onTap: ウィジェットがタップされた時に実行する処理を指定します。
- ウィジェットを画面に表示します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: customButton(),
),
),
);
}
}これで、InkWellを使ったタップ可能なウィジェットを作成できます。
サンプルコード
以下は、InkWellを使ったボタンのサンプルコードです。ボタンをタップすると、カウンターの数値が1ずつ増加します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
body: Center(
child: MyButton(),
),
),
);
}
}
class MyButton extends StatefulWidget {
@override
_MyButtonState createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() {
_counter++;
});
},
highlightColor: Colors.amber[300],
child: Container(
padding: EdgeInsets.all(12.0),
child: Text('$_counter', style: TextStyle(fontSize: 30)),
),
);
}
}プロパティ
InkWellには、以下のようなプロパティがあります。
onTap: タップジェスチャーが検出された時に実行する処理を指定します。onDoubleTap: ダブルタップジェスチャーが検出された時に実行する処理を指定します。onLongPress: 長押しジェスチャーが検出された時に実行する処理を指定します。onHighlightChanged: InkWellのハイライトが変更されたときに実行する処理を指定します。borderRadius: インクスプラッシュエフェクトの枠線の角丸を設定します。highlightColor: InkWellがハイライトされた時の色を設定します。splashColor: インクスプラッシュエフェクトの色を設定します。enableFeedback: タップ音とバイブレーションを有効にするかどうかを指定します。
InkWellは、タップジェスチャーを検出するためにGestureDetectorを使用しています。InkWellを使うことで、簡単にタップ可能なウィジェットを作成することができます。
また、InkWellはMaterial Designのウィジェットですので、MaterialApp内で使用することが推奨されます。
以上が、FlutterのInkWellについての説明となります。InkWellを使うことで、タップ可能なウィジェットにインクスプラッシュエフェクトを追加することができます。是非、お試しいただければと思います。