InkWell = インクつぼ
マテリアルデザインガイドラインに準拠したウィジェットは、タップされた時にリップル(波紋)アニメーションが発生します。
FlutterはInkWellウィジェットを提供しており、InkWellウィジェットはリップルアニメーション効果(effect)が備えられています。以下のステップでリップルエフェクトを生成します。
- tapをサポートしているウィジェットを生成します。
- 「タップ時のコールバック」と「リップルアニメーション」を管理するため、1で作ったウィジェットをInkWellウィジェットでラップします。
InkWell( // When the user taps the button, show a snackbar. onTap: () { Scaffold.of(context).showSnackBar(SnackBar( content: Text('Tap'), )); }, child: Container( padding: EdgeInsets.all(12.0), child: Text('Flat Button'), ), );
まとめのサンプル
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'InkWell Demo'; return MaterialApp( title: title, home: MyHomePage(title: title), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center(child: MyButton()), ); } } class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { // The InkWell wraps the custom flat button widget. return InkWell( // When the user taps the button, show a snackbar. onTap: () { Scaffold.of(context).showSnackBar(SnackBar( content: Text('Tap'), )); }, child: Container( padding: EdgeInsets.all(12.0), child: Text('Flat Button'), ), ); } }
参考