Flutter development – Set fillet :ClipRRect, the secret you ignored (fillet failure)

What? Set fillet invalid? Have you ever come across one? Do you know why?

Today, in this blog post, the blogger will take you through the secrets of ClipRRect’s failed rounded corners.

As usual, let’s take a look at the renderings:



The main culprit affecting the rounded corners is not others. To set the formal margin, let’s look at the code:

import 'package:flutter/material.dart';

class ClipRectPage extends StatefulWidget {
  @override
  _ClipRectPageState createState() => _ClipRectPageState();
}

class _ClipRectPageState extends State<ClipRectPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Set rounded corners :ClipRRect'),),body: SafeArea(
        child: Column(
          children: <Widget>[
            / / / is normal
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      width: 300.height: 100.color: Colors.red,
                      child: Center(child: Text('Normal rounded corners')))),),),/// There are no rounded corners
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(top: 15),
                      width: 300.height: 100.color: Colors.red,
                        child: Center(child: Text('No rounded corners on top')))),),),/// No rounded corners on the left
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(left: 15),
                      width: 300.height: 100.color: Colors.red,
                        child: Center(child: Text('No rounded corner on the left')))),),),/// There is no rounded corner on the right
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(right: 15),
                      width: 300.height: 100.color: Colors.red,
                        child: Center(child: Text('No rounded corner on the right')))),),),/// No rounded corners below
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(bottom: 15),
                      width: 300.height: 100.color: Colors.red,
                        child: Center(child: Text('No rounded corners below')))),), [,), (,),); }}Copy the code

You’ll notice that the rounded corners disappear everywhere you set a margin, but I can’t leave it alone. You can set it, just like the widget in this page, by wrapping a Container around it and setting the margin.

Another good tool for writing rounded widgets is Card. The rounded corners of the widget are not affected by the margin Settings.