Splash flows outside of Container/FlatButton - Flutter
810
You can use ClipRRect
widget which clips the underlying widget with rounded corners and by using borderRadius
property and passing same radius
as of parent widget ie, Container
, ie, wrap the FlatButton
with ClipRRect
to achieve desired effect. Sample working code below:
body: Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
height: 42.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: FlatButton(
onPressed: () {
print('pressed');
},
child: Text(
'Send',
style: TextStyle(
color: Colors.white
),
),
),
)
),
Hope this answers your question.
Author by
James Lloyd
Updated on November 21, 2022Comments
-
James Lloyd over 1 year
I'm trying to get the splash to match the same shape as my Container that has a FlatButton as its child.
When pressed, the splash currently fills a different shape as shown here:
My code for the widget is below:
import 'package:flutter/material.dart'; class RoundedButton extends StatelessWidget { const RoundedButton( {this.buttonColor, this.buttonTitle, @required this.onPressed}); final Color buttonColor; final String buttonTitle; final Function onPressed; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 16.0), height: 42.0, width: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(30.0), color: buttonColor, ), child: FlatButton( onPressed: onPressed, child: Text( buttonTitle, style: TextStyle( color: Colors.white ), ), ), ); } }