Flutter circular ripple effect: How to build beautiful material BottomNavigationBar
Solution 1
The Ink you're looking for is InkResponse and not InkWell
. InkWell fills the entire available space with a highlight and then do the splash but, InkResponse
does the splash with that circular effect you're looking for, you need to tweak it a bit, but this is the code example:
Material(
child: Container(
child: Center(
child: InkResponse(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(30),
child: Icon(Icons.home),
),
),
),
),
)
| InkWell | InkResponse Default | InkResponse Custom |
Solution 2
Google Stadia App Example: Image 1 Image 2
NB: Use Material Widget as parent of the Row so the effect can be expanded over all the row width and with a limit condition of "radius: 40"
Container(
width: double.infinity,
height: 300,
child: Material(
color: Colors.transparent,
child: Row(
children: [
Expanded(
flex: 20,
child: InkResponse(
onTap: () {},
//containedInkWell: false,
splashFactory: InkRipple.splashFactory,
radius: 40,
splashColor: Colors.black12,
highlightColor: Colors.transparent,
child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
),
),
Expanded(
flex: 20,
child: InkResponse(
onTap: () {},
//containedInkWell: false,
splashFactory: InkRipple.splashFactory,
radius: 40,
splashColor: Colors.black12,
highlightColor: Colors.transparent,
child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
),
),
Expanded(
flex: 20,
child: InkResponse(
onTap: () {},
//containedInkWell: false,
splashFactory: InkRipple.splashFactory,
radius: 40,
splashColor: Colors.black12,
highlightColor: Colors.transparent,
child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
),
),
Expanded(
flex: 20,
child: InkResponse(
onTap: () {},
//containedInkWell: false,
splashFactory: InkRipple.splashFactory,
radius: 40,
splashColor: Colors.black12,
highlightColor: Colors.transparent,
child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
),
),
Expanded(
flex: 20,
child: InkResponse(
onTap: () {},
//containedInkWell: false,
splashFactory: InkRipple.splashFactory,
radius: 40,
splashColor: Colors.black12,
highlightColor: Colors.transparent,
child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
),
),
],
),
),
)
David Peters
Updated on December 20, 2022Comments
-
David Peters over 1 year
As the Google stadia app is made with flutter I was wondering how they achieved the much more beautiful ripple animation on their BottomNavigationBar.
Example:
How did they achieve the custom ripple animation?
Edit: Simple custom BottomNavigationItem:
bottomNavigationBar: Container( height: 50, child: Row( children: <Widget>[ Expanded( child: BottomItem(), ), Expanded( child: BottomItem(), ), Expanded( child: BottomItem(), ), ], )),
class BottomItem extends StatelessWidget { @override Widget build(BuildContext context) { return InkWell( onTap: () {}, child: Center(child: Icon(Icons.shop)), ); } }