Flutter基礎-021-ClipOval圖片裁剪

flutter提供的一個裁剪widget

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //導航欄
        title: Text("App Name"),
        actions: <Widget>[
          //導航欄右側選單
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ClipOval(
            child: Image.asset(
              "images/avatar.jpg",
              width: 180,
            ),
          ),
          ClipOval(
            child: new SizedBox(
              width: 150.0,
              height: 150.0,
              child: Image.asset(
                "images/avatar2.jpg",
                width: 150,
              ),
            ),
          ),
          ClipOval(
            child: Image.asset(
              "images/avatar3.jpg",
              width: 180,
              height: 180,
            ),
            clipper: MyClipper(),
            clipBehavior: Clip.hardEdge,
          ),
        ],
      ),
    );
  }
}

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

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}
複製程式碼