Flutter圆角矩形绘制插件figma_squircle的使用

Flutter圆角矩形绘制插件figma_squircle的使用

image

简介

figma_squircle 是一个用于在 Flutter 中实现 Figma 圆角平滑效果的插件。

使用方法

装饰器（Decoration）

SmoothRectangleBorder 可以通过自定义的 SmoothBorderRadius 提供给常规的 ShapeDecoration。

Container(
    height: 100,
    width: 100,
    decoration: ShapeDecoration(
        color: Colors.red.withOpacity(0.75),
        shape: SmoothRectangleBorder(
            borderRadius: SmoothBorderRadius(
              cornerRadius: 10,
              cornerSmoothing: 0.5,
            ),
        ),
    ),
)

单独设置每个角

每个角可以有独立的平滑度和半径。

SmoothBorderRadius.only(
    topLeft: SmoothRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    topRight: SmoothRadius(
        cornerRadius: 20,
        cornerSmoothing: 0.4,
    ),
    bottomLeft: SmoothRadius(
        cornerRadius: 5,
        cornerSmoothing: 0.8,
    ),
    bottomRight: SmoothRadius(
        cornerRadius: 30,
        cornerSmoothing: 0.6,
    ),
),

裁剪（Clip）

要裁剪任何具有平滑矩形的组件，可以使用 ClipSmoothRect。

ClipSmoothRect(
    radius: SmoothBorderRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
    ),
)

完整示例

以下是一个完整的示例代码，展示了如何使用 figma_squircle 插件来创建不同类型的圆角矩形。

import 'package:figma_squircle/figma_squircle.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

const niceGradient = LinearGradient(
  colors: [
    Color(0xFFFF4286),
    Color(0xFFFF6666),
  ],
);

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Figma Squircles',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Mode> selected = const [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          Center(
            child: Container(
              color: Colors.red,
              child: Container(
                padding: EdgeInsets.all(20),
                decoration: ShapeDecoration(
                  color: Colors.blue.withOpacity(0.5),
                  shape: SmoothRectangleBorder(
                    side: BorderSide(
                      color: Colors.blue,
                      width: 2,
                    ),
                    borderRadius: SmoothBorderRadius(
                      cornerRadius: 16,
                      cornerSmoothing: 0.0,
                    ),
                    borderAlign: BorderAlign.outside,
                  ),
                ),
                child: Text('Hello'),
              ),
            ),
          ),
          CompareExample(),
          EditorExample(),
          AnimatedExample(),
          TilesExample(),
          VariationsExample(
            key: Key('Uniform: 10 1'),
            selected: selected,
            onSelected: (selected) => setState(() => this.selected = selected),
            radius: SmoothBorderRadius(
              cornerRadius: 10,
              cornerSmoothing: 1,
            ),
          ),
          // 其他 VariationsExample 示例...
          Center(
            child: ClipSmoothRect(
              radius: SmoothBorderRadius(
                cornerRadius: 10,
                cornerSmoothing: 1,
              ),
              child: Container(
                color: Colors.red,
                width: 100,
                height: 100,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 其他示例类的代码...

更多关于Flutter圆角矩形绘制插件figma_squircle的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter圆角矩形绘制插件figma_squircle的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用figma_squircle插件来绘制圆角矩形的示例代码。figma_squircle插件允许你以更灵活的方式创建圆角矩形，类似于Figma中的Squircle形状。

首先，你需要在你的pubspec.yaml文件中添加figma_squircle依赖：

dependencies:
  flutter:
    sdk: flutter
  figma_squircle: ^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用figma_squircle绘制一个Squircle形状：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SquircleDemo(),
    );
  }
}

class SquircleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Figma Squircle Demo'),
      ),
      body: Center(
        child: SquircleContainer(
          color: Colors.blue,
          width: 200,
          height: 100,
          borderRadius: BorderRadius.circular(20), // 初始圆角半径，之后会被Squircle调整
          squircleRatio: 0.5, // Squircle形状的比例，值范围为0到1
        ),
      ),
    );
  }
}

class SquircleContainer extends StatelessWidget {
  final Color color;
  final double width;
  final double height;
  final BorderRadius borderRadius;
  final double squircleRatio;

  const SquircleContainer({
    Key? key,
    required this.color,
    required this.width,
    required this.height,
    required this.borderRadius,
    required this.squircleRatio,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用figma_squircle插件计算Squircle的路径
    final path = SquirclePath(
      rect: Rect.fromLTWH(0, 0, width, height),
      ratio: squircleRatio,
    ).toPath();

    return CustomPaint(
      painter: SquirclePainter(
        color: color,
        path: path,
      ),
      size: Size(width, height),
    );
  }
}

class SquirclePainter extends CustomPainter {
  final Color color;
  final Path path;

  SquirclePainter({required this.color, required this.path});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

在这个示例中，我们创建了一个SquircleContainer自定义Widget，它使用figma_squircle插件的SquirclePath类来计算Squircle形状的路径。然后，我们使用CustomPaint和自定义的SquirclePainter类来绘制这个形状。

请注意，SquirclePath类的构造函数接受一个Rect对象和一个ratio参数，其中Rect对象定义了Squircle的边界框，而ratio参数定义了Squircle的形状比例（值范围为0到1，0表示完全矩形，1表示完全圆形）。

这个示例代码展示了如何使用figma_squircle插件在Flutter应用中绘制Squircle形状。你可以根据需要调整width、height、borderRadius和squircleRatio等参数来创建不同的Squircle形状。

回到顶部