Google Stadia 应用示例:
图 1
图 2
注意:使用 Material Widget 作为 Row 的父级,因此效果可以扩展到所有行宽,并且限制条件为“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)),
),
),
],
),
),
)