Flutter圆角处理插件smooth_corner的使用

插件简介

smooth_corner 是一个Flutter插件，用于在Flutter中实现平滑的iOS风格圆角。它模仿了Figma的"corner smoothing"特性，算法灵感来源于Figma的博客文章Desperately seeking squircles。

该插件通过组合两个贝塞尔曲线和一个弧线来创建平滑的圆角。类似于Figma，其平滑度是可调的。当smoothness参数为0时，表示普通的圆角矩形；当参数为1时，圆角由两个贝塞尔曲线组成，接近超椭圆。

使用示例图

安装依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  smooth_corner: ^1.1.1

内置组件

参数说明

所有内置组件提供三个参数：

• smoothness: 平滑度，范围为[0, 1.0]。根据Figma标准，0.6最接近iOS的圆角曲线。
• side: 类型为BorderSide，用于设置边框。
• borderRadius: 用于设置圆角半径。注意，如果x和y值不相等，则选择较小的一个。

SmoothContainer

SmoothContainer 包含了Container的所有参数。

SmoothContainer(
  width: 200,
  height: 200,
  smoothness: 0.6,
  side: BorderSide(color: Colors.cyan, width: 2),
  borderRadius: BorderRadius.circular(40),
  child: Center(child: Text('Hello World')),
  alignment: Alignment.center,
)

SmoothClipRRect

为了使图片具有边框，提供了SmoothClipRRect。

SmoothClipRRect(
  smoothness: 0.6,
  side: BorderSide(color: Colors.deepOrange, width: 4),
  borderRadius: BorderRadius.circular(40),
  child: Image.network(
    "https://img1.mydrivers.com/img/20200424/s_cf611107e2d2469fa54b0d8ae2ee5a31.jpg",
    fit: BoxFit.cover,
  ),
)

SmoothCard

SmoothCard 包含了Card的所有参数。

SmoothCard(
  smoothness: 0.6,
  borderRadius: BorderRadius.circular(40),
  elevation: 6,
  child: Center(child: Text('Hello World')),
)

自定义组件

ShapeDecoration

使用ShapeDecoration来自定义平滑圆角组件。

Container(
  width: 200,
  height: 200,
  alignment: Alignment.center,
  decoration: ShapeDecoration(
    shape: SmoothRectangleBorder(
      borderRadius: BorderRadius.circular(40),
      smoothness: 0.6,
    ),
    color: Colors.amber,
  ),
  child: Text('Hello World'),
)

ShapeBorderClipper

使用ShapeBorderClipper来自定义裁剪路径。

Container(
  width: 200,
  height: 200,
  child: ClipPath(
    clipper: ShapeBorderClipper(
      shape: SmoothRectangleBorder(
        smoothness: 0.6,
        borderRadius: BorderRadius.circular(40),
      ),
    ),
    child: Image.network("https://img1.mydrivers.com/img/20200424/s_cf611107e2d2469fa54b0d8ae2ee5a31.jpg"),
  ),
)

完整示例Demo

下面是一个完整的示例代码，展示了如何使用smooth_corner插件创建一个包含不同平滑圆角组件的应用程序。

import 'package:flutter/material.dart';
import 'package:smooth_corner/smooth_corner.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smooth Corner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'SMOOTH CORNER'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double radius = 40;
  double smoothness = 0.6;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                ),
                children: [
                  SmoothClipRRect(
                    smoothness: smoothness,
                    side: BorderSide(color: Colors.deepOrange, width: 4),
                    borderRadius: BorderRadius.circular(radius),
                    child: Image.network(
                      "https://img1.mydrivers.com/img/20200424/s_cf611107e2d2469fa54b0d8ae2ee5a31.jpg",
                      fit: BoxFit.cover,
                    ),
                  ),
                  SmoothContainer(
                    smoothness: smoothness,
                    side: BorderSide(color: Colors.cyan, width: 2),
                    borderRadius: BorderRadius.circular(radius),
                    child: Center(child: Text('Hello World')),
                    alignment: Alignment.center,
                  ),
                  SmoothCard(
                    smoothness: smoothness,
                    borderRadius: BorderRadius.circular(radius),
                    elevation: 6,
                    child: Center(child: Text('Hello World')),
                  ),
                  Container(
                    alignment: Alignment.center,
                    decoration: ShapeDecoration(
                      shape: SmoothRectangleBorder(
                        borderRadius: BorderRadius.circular(radius),
                        smoothness: smoothness,
                      ),
                      color: Colors.amber,
                    ),
                    child: Text(
                      'radius:${radius.toInt()} \nsmooth:${smoothness.toStringAsFixed(2)}',
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(padding: const EdgeInsets.only(top: 40)),
          Slider(
            min: 0.0,
            max: 1.0,
            onChanged: (double value) {
              setState(() {
                smoothness = value;
              });
            },
            value: smoothness,
          ),
          Slider(
            activeColor: Colors.amber,
            min: 0,
            max: 100,
            onChanged: (double value) {
              setState(() {
                radius = value;
              });
            },
            value: radius,
          ),
        ],
      ),
    );
  }
}

以上代码展示了如何使用smooth_corner插件创建一个包含不同平滑圆角组件的应用程序，并允许用户通过滑块动态调整圆角的半径和平滑度。