flutter好用的輪子推薦十四-flutter將widget裁剪成各類自定義形狀

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：flutter_custom_clippers
• 輪子概述：flutter將widget裁剪成各類自定義形狀.
• 輪子做者：dlohani48@gmail.com
• 推薦指數：★★★★
• 經常使用指數：★★★★
• 效果預覽：

  

安裝

dependencies:
 flutter_custom_clippers: ^1.1.0
複製代碼

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
複製代碼

使用方法

基本用法：

ClipPath(
    clipper: SideCutClipper(),//flutter_custom_clippers預設的裁剪風格類
    child: Container(//被裁剪的widget
        height: 100,
        width: 500  ,
        color: Colors.pink,
        child: Center(child: Text("SideCutClipper()")),
    ),
),
複製代碼

全部的預設裁剪風格對應的類名：

ClipPath(
    clipper: SideCutClipper(),
    child: Container(
        height: 100,
        width: 500  ,
        color: Colors.pink,
        child: Center(child: Text("SideCutClipper()")),
    ),
),
ClipPath(
    clipper: MultipleRoundedCurveClipper(),
    child: Container(
        height: 100,
        color: Colors.pink,
        child: Center(child: Text("MultipleRoundedCurveClipper()")),
    ),
),
ClipPath(
    clipper: MultiplePointedEdgeClipper(),
    child: Container(
        height: 100,
        color: Colors.green,
        child: Center(child: Text("MultiplePointedEdgeClipper()")),
    ),
),
ClipPath(
    clipper: OctagonalClipper(),
    child: Container(
        height: 220,
        color: Colors.red,
        child: Center(child: Text("OctagonalClipper()")),
    ),
),
ClipPath(
clipper: HexagonalClipper(),
    child: Container(
        height: 220,
        color: Colors.blueAccent,
        child: Center(child: Text("HexagonalClipper()")),
    ),
),
ClipPath(
    clipper: HexagonalClipper(reverse: true),
    child: Container(
        height: 220,
        color: Colors.orangeAccent,
        child: Center(child: Text("HexagonalClipper(reverse: true)")),
    ),
),
ClipPath(
clipper: ParallelogramClipper(),
    child: Container(
        height: 220,
        color: Colors.pinkAccent,
        child: Center(child: Text("ParallelogramClipper()")),
    ),
),
ClipPath(
    clipper: DiagonalPathClipperOne(),
    child: Container(
        height: 120,
        color: Colors.red,
        child: Center(child: Text("DiagonalPathClipper()")),
    ),
),
ClipPath(
    clipper: DiagonalPathClipperTwo(),
    child: Container(
        height: 120,
        color: Colors.pink,
        child: Center(child: Text("DiagonalPathClipper()")),
    ),
),
ClipPath(
    clipper: WaveClipperOne(),
    child: Container(
        height: 120,
        color: Colors.deepPurple,
        child: Center(child: Text("WaveClipperOne()")),
    ),
),
ClipPath(
    clipper: WaveClipperOne(reverse: true),
    child: Container(
        height: 120,
        color: Colors.deepPurple,
        child: Center(child: Text("WaveClipperOne(reverse: true)")),
    ),
),
ClipPath(
    clipper: WaveClipperTwo(),
    child: Container(
        height: 120,
        color: Colors.orange,
        child: Center(child: Text("WaveClipperTwo()")),
    ),
),
ClipPath(
    clipper: WaveClipperTwo(reverse: true),
    child: Container(
        height: 120,
        color: Colors.orange,
        child: Center(child: Text("WaveClipperTwo(reverse: true)")),
    ),
),
ClipPath(
    clipper: RoundedDiagonalPathClipper(),
    child: Container(
        height: 320,
        decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(50.0)),
        color: Colors.orange,
        ),
        child: Center(child: Text("RoundedDiagonalPathClipper()")),
    ),
),
ClipPath(
    clipper: OvalTopBorderClipper(),
    child: Container(
        height: 120,
        color: Colors.yellow,
        child: Center(child: Text("OvalTopBorderClipper()")),
    ),
),
ClipPath(
    clipper: ArrowClipper(70, 80, Edge.BOTTOM),
    child: Container(
        height: 120,
        color: Colors.green,
        child: Center(child: Text("ArrowClipper()")),
    ),
),
ClipPath(
    clipper: StarClipper(8),
    child: Container(
        height: 450,
        color: Colors.indigo,
        child: Center(child: Text("Starlipper()")),
    ),
),
ClipPath(
    clipper: MessageClipper(borderRadius: 16),
    child: Container(
        height: 200,
        decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(16.0)),
            color: Colors.red,
        ),
        child: Center(child: Text("MessageClipper()")),
    ),
),
複製代碼

全部的預設裁剪風格效果截圖：

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源碼：github.com/826327700/f…