CODEWITHSUNDEEP
androidflutterdartflutter-layoutclip
Doc
Doc

Reputation: 11651

Remove extra part after clipping in Flutter

Clipping allows me to draw only the part which I want to show. How do I remove the extra part which is not drawn but still takes up space?

screenshot

The code

import 'package:flutter/material.dart';

class ClipTut extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            ClipRect(
              clipper: CustomRect(),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 4, color: Colors.black),
                  color: Colors.blue,
                ),
                width: 200.0,
                height: 200.0,
              ),
            ),
            Container(
              height: 200,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(width: 4, color: Colors.black),
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class CustomRect extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTRB(0, 0.0, size.width/2, size.height);

  @override
  bool shouldReclip(CustomRect oldClipper) => true;
}

Upvotes: 4

Views: 2227

Answers (1)

Tommie C.
Tommie C.

Reputation: 13181

My Solution

I had a similar problem recently (I needed to clip the image in half) and found this sample code on the flutter api site (use the other alignment points to change slicing behaviors) - no extra space left over:

ClipRect(
  child: Align(
    alignment: Alignment.topCenter,
    heightFactor: 0.5,
    child: Image.network(userAvatarUrl),
  ),
)

Upvotes: 3

Related Questions