Inscription – sword tianya, start from your drip accumulation, and will keep improving.

Flutter is Google’s latest mobile development framework.

The Clip-family widgets are used to crop other widgets to implement styles of various shapes.

Clip related widgets as follows:

  • ClipOval: circular clipping
  • ClipRRect: Rounded rectangle clipping
  • ClipRect: Rectangular clipping
  • ClipPath: path clipping

ClipOval can crop a child Wiget into a round or oval shape in a Flutter. In business development application scenarios, such as the implementation of circular images, ClipOval can be used to wrap an Image component, as shown in the following Demo:


class TestClipOvalPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    return_ClipOvalState(); }}class _ClipOvalState extends State   {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(title: Text(" ClipOval "),),
      body: Container(
        width: 100,
        height: 100./// Clipping the component
        child: ClipOval(
          /// a picture
          child: new Image.network(
              imageUrl, // Image address
              / / / filled in
              fit: BoxFit.fill),
        ),
      ),
    );
  }

  String imageUrl =
      "https://timgsa.baidu.com/timg?demo.image&quality=80&size=b9999_10000&sec=1578583093&di=0bf687d9589dc5c6c0778de9576ee077 &imgtype=jpg&er=1&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201403%2F28%2F111010vhgc45hkh41f1mfd.jpg";
}

Copy the code

The running effect is as follows:

The completion of

Of course, with the character of small series, it is necessary to have the source code: the entire code of this article is here

Of course, in order to xiaobian character, there must be a detailed video explanation of the use of properties, click here to view

[X1] The daily reminder of wechat official account is accumulated at any time

【 X2 】 Various series of free open source video tutorials focus on you won’t get lost

【 X3 】 series article millions of Demo copy and paste use at any time