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

小小包子發表於2019-11-14

前言

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()")),
    ),
),
複製程式碼