【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part132 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part132 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part131 Material Components
引き続き、Material Componentsについて学びます。
InkWellウィジェット
タップ可能なウィジェットをタップすると波上のアニメーション(Ripple Effect
)が表示されます。
InkWell
ウィジェットはコレを実現できます。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool dark = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: dark ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
centerTitle: true, // タイトルが中央になります。
title: Text('sample'),
// SliverAppBarにも同じプロパティがあります。
// flexibleSpace: ,
),
body: InkWell(
onTap: () {
// 非推奨となったようです。
// Scaffold.of(context).showSnackBar(
// SnackBar(
// content: Text('タップ'),
// ),
// );
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('タップ'),
),
);
},
child: Container(
width: 100.0,
height: 100.0,
padding: EdgeInsets.all(12.0),
child: Center(
child: Text('ボタン'),
),
),
),
),
);
}
}
ふわーっと広がります。
最後に
こんなアニメーションあったんですね😉
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません