Flutter绘制内凹弧形圆插件inner_curved_circle的使用

简介

inner_curved_circle 是一个用于 Flutter 的自定义剪裁器插件，它允许你在任何容器或小部件顶部创建一个独特的内凹曲线，从而为你的用户界面设计添加视觉吸引力。

特性：

• 提供自定义剪裁器以支持 Flutter 小部件。
• 能够在任何容器或小部件顶部创建深内凹曲线。
• 易于集成到任何 Flutter 应用程序中。

开始使用

安装

首先，在 pubspec.yaml 文件的 dependencies 部分添加以下依赖：

dependencies:
  inner_curved_circle: ^0.0.2

然后运行以下命令以获取依赖项：

flutter pub get

使用示例

以下是一个完整的示例，展示如何在 Flutter 中使用 inner_curved_circle 插件来绘制内凹弧形圆。

示例代码

import 'package:flutter/material.dart';
import 'package:inner_curved_circle/inner_curved_circle.dart'; // 导入插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Inner Curved Circle Example'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            // 绘制带有内凹弧形的容器
            ClipPath(
              clipper: InnerCurvedCircleClipper(), // 使用内凹弧形剪裁器
              child: Container(
                width: size.width * 0.8, // 设置宽度
                height: size.height * 0.5, // 设置高度
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.purple],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
              ),
            ),

            // 在内凹弧形上方放置文字
            Positioned(
              bottom: size.height * 0.2, // 调整文字位置
              left: size.width * 0.1,
              right: size.width * 0.1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "欢迎加入",
                    style: TextStyle(
                      fontSize: size.width * 0.06,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(height: 10),
                  Text(
                    "会员中心",
                    style: TextStyle(
                      fontSize: size.width * 0.04,
                      fontWeight: FontWeight.normal,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

运行上述代码后，你将看到以下效果：

代码说明

1. 导入插件：

   import 'package:inner_curved_circle/inner_curved_circle.dart';
   

   导入 inner_curved_circle 插件以便使用其提供的剪裁器。

2. 使用 ClipPath 和 InnerCurvedCircleClipper：

   ClipPath(
     clipper: InnerCurvedCircleClipper(),
     child: Container(
       ...
     ),
   )
   

   • ClipPath：用于应用剪裁效果。
   • InnerCurvedCircleClipper：内凹弧形剪裁器。

3. 设置容器样式：

   Container(
     width: size.width * 0.8,
     height: size.height * 0.5,
     decoration: BoxDecoration(
       gradient: LinearGradient(
         colors: [Colors.blue, Colors.purple],
         begin: Alignment.topLeft,
         end: Alignment.bottomRight,
       ),
     ),
   )
   

   • 定义容器的宽度和高度。
   • 使用 BoxDecoration 添加渐变背景。

4. 添加文字：

   Positioned(
     bottom: size.height * 0.2,
     left: size.width * 0.1,
     right: size.width * 0.1,
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text("欢迎加入", ...),
         Text("会员中心", ...),
       ],
     ),
   )