I'm attempting to build the following layout in Flutter.
I'm looking to achieve 2 things:
Any ideas?
For drawing Custom Shapes you will need a CustomPaint widget which has a painter property. You will set your drawing to the painter property and you are good to go. Start by setting up your basic application structure.
By default, the shape of the floating action button (FAB) in the flutter is circular and the location is bottom right floated. You can change the location and shape of the floating action button using properties in Scaffold() widget class and FloatingActionButton() widget class.
Here is my code:
Stack(
children: <Widget>[
Pic(),
Info(),
],
)
For widget Pic:
Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
image: NetworkImage(
'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
),
),
)
For widget Info:
ClipPath(
clipper: TrapeziumClipper(),
child: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width * 3/5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 6/15
),
child: Text(
'Testing clipping with soft wrap',
softWrap: true,
style: Theme.of(context).textTheme.title,
),
),
],
),
),
)
For TrapeziumClipper:
class TrapeziumClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width * 2/3, 0.0);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(TrapeziumClipper oldClipper) => false;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With