Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom flutter widget shape

I'm attempting to build the following layout in Flutter.

I'm looking to achieve 2 things:

  • Render a background that draws a diagonal side (I'm guessing through a BoxDecoration)
  • Have the pink container clip children along the diagonal side - i.e. if the text is too large for one line it should wrap to a new line.

Any ideas?

Diagonal layout shape

like image 717
athor Avatar asked Apr 04 '18 01:04

athor


People also ask

How do I create a custom shape widget in Flutter?

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.

How do you change the shape of a container in Flutter?

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.


1 Answers

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;
}
like image 151
Philip Ch'ng Avatar answered Sep 21 '22 15:09

Philip Ch'ng