Flutter simple components –ClipRect, ClipRRect

ClipRect is introduced

ClipRect clips a child component to a given rectangular size. By default, ClipRect prevents the child component from having a session outside the boundary, or by customizing the clipping path if you need to limit the size and position of the child component.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

When is ClipRect used?

We use ClipRect when we need to tailor sub-components.

Attributes and description of ClipRect

ClipRect use

ClipRect basic use

We show an image here, wrapped with ClipRect, when the excess will be clipped

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipRectExample/ClipperPath.dart';

class ClipRectExample extends StatefulWidget {
  @override
  _ClipRectExampleState createState() => _ClipRectExampleState();
}

class _ClipRectExampleState extends State<ClipRectExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ContainerExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRect(
              child: Align(
                alignment: Alignment.topLeft,
                widthFactor: 0.5,
                child: Image.network("FM = https://img1.baidu.com/it/u=2324541312, 3167046558 & 253 & FMT = auto&app = 120 & f = JPEG? W = 601 & h = 400"(() [() [() [() [() [() [() }}Copy the code

Results show

ClipRect custom clipping is used

Step 1: Define custom clipping

import 'package:flutter/material.dart';

class ClipperPath extends CustomClipper<Rect>{
  @override
  Rect getClip(Size size) {
    return new Rect.fromLTRB(100.10, size.width, size.height);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true; }}Copy the code

Step 2: Use custom clipping

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipRectExample/ClipperPath.dart';

class ClipRectExample extends StatefulWidget {
  @override
  _ClipRectExampleState createState() => _ClipRectExampleState();
}

class _ClipRectExampleState extends State<ClipRectExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRect(
              /// Custom clipping path
              clipper: ClipperPath(),
              child: Align(
                alignment: Alignment.topLeft,
                widthFactor: 1,
                child: Image.network("FM = https://img1.baidu.com/it/u=2324541312, 3167046558 & 253 & FMT = auto&app = 120 & f = JPEG? W = 601 & h = 400"(() [() [() [() [() [() [() }}Copy the code

Results show

ClipRRect introduction

ClipRRect is a widget that uses rounded rectangle clip subitems. By default, ClipRRect uses its own bounds as the base rectangle of the clip, but you can customize the size and position of the clip using custom clippers.

When is ClipRRect used?

You can use ClipRRect when you need to trim rounded corners of sub-components, and of course you can customize clipping.

Properties and description of ClipRRect

ClipRRect use

ClipRRect is basically used

Here we define a box with 300 width and height, purple background color, we ClipRRect to wrap to see the effect

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipRectExample/ClipperPath.dart';
import 'package:flutter_code/ClipRectExample/ClipperRPath.dart';

class ClipRectExample extends StatefulWidget {
  @override
  _ClipRectExampleState createState() => _ClipRectExampleState();
}

class _ClipRectExampleState extends State<ClipRectExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: Container(
                color: Colors.purple,
                width: 300,
                height: 300() [() [() [() [() [() }}Copy the code

Results show

ClipRRect custom clipping is used

Step 1: Define custom clipping

import 'package:flutter/material.dart';

class ClipperRPath extends CustomClipper<RRect>{

  @override
  RRect getClip(Size size) {
    return RRect.fromRectAndCorners(
      Rect.fromCenter(
          center: Offset(100.100),
          width: 200,
          height: 100
      ),
      topLeft: Radius.circular(50),
      bottomRight: Radius.circular(50)); }@override
  bool shouldReclip(CustomClipper<RRect> oldClipper) {
    return false; }}Copy the code

Step 2: Use custom clipping

import 'package:flutter/material.dart';
import 'package:flutter_code/ClipRectExample/ClipperPath.dart';
import 'package:flutter_code/ClipRectExample/ClipperRPath.dart';

class ClipRectExample extends StatefulWidget {
  @override
  _ClipRectExampleState createState() => _ClipRectExampleState();
}

class _ClipRectExampleState extends State<ClipRectExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRectExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRRect(
              clipper: ClipperRPath(),
              child: Container(
                color: Colors.purple,
                width: 300,
                height: 300() [() [() [() [() [() }}Copy the code

Results show

conclusion

In this chapter, we explain ClipRect and ClipRRect. Their main function is to cut sub-components, and they can also customize the cutting. If you only need to cut rounded corners of sub-components, we can use ClipRRect, because it is more simple.