搜索插件、代码仓与 APP 分类

插件详情v1.0.1

dashed_container

一个用于 Flutter 的虚线容器插件,可轻松为您的控件添加虚线。

近 30 天下载
79
喜欢数
15
Pub 分数
25

安装插件

flutter pub add dashed_container

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

dashed_container 包是 Flutter 插件,可简化在小部件周围创建虚线边框的过程。它提供了一个易于使用的容器,支持自定义虚线样式,包括虚线长度、间距、颜色和笔画宽度。非常适合需要视觉分隔或强调的 UI 元素,例如表单字段、卡片或装饰性轮廓。该包利用 Flutter 的绘图系统渲染平滑且可缩放的虚线,无需复杂的自定义绘图代码。通过简单的 pub 依赖项,可无缝集成到现有的 Flutter 项目中。

适合场景

  • 为UI组件添加虚线边框
  • 创建表单字段高亮
  • 设计装饰性卡片轮廓
  • 布局中的视觉分离
  • 自定义边框外观

主要特点

  • 虚线边框的简单 API
  • 可配置的虚线长度和间隙
  • 对自定义颜色和描边宽度的支持
  • 轻量且高效
  • 适用于任何内部小部件

适合对象

  • 寻求视觉多样性的UI设计师
  • 开发表单或卡片的开发者
  • 需要轻量级装饰的项目
  • Flutter 初学者探索自定义边框
  • 具有现代极简设计的应用程序

使用建议

  • 仅限边框装饰
  • 不支持虚线填充
  • 不处理复杂的裁剪
  • 最适合简单的矩形形状
  • 在复杂布局中可能需要手动对齐

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

dashed_container

A Dashed Container plugin for Flutter, easy to implement dashed line for your widgets

Demo

Demo:

Usage

To use plugin, just import package import 'package:dashed_container/dashed_container.dart';

Example

You can check example directory to know how to use it like the demo image.

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

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

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

      final String title;

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

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text(widget.title)),
          body: SingleChildScrollView(
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Line container - blankLength = 0'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 200.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(10.0)),
                    ),
                    dashColor: Colors.black,
                    borderRadius: 10.0,
                    dashedLength: 30.0,
                    blankLength: 0.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - rectangle'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 100.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(20.0)),
                    ),
                    dashColor: Colors.black,
                    borderRadius: 20.0,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - circle'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 200.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
                    ),
                    dashColor: Colors.black,
                    boxShape: BoxShape.circle,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - custom'),
                  _buildSpace(),
                  DashedContainer(
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: FlutterLogo(
                        size: 80,
                      ),
                    ),
                    dashColor: Colors.black,
                    boxShape: BoxShape.circle,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                ],
              ),
            ),
          ),
        );
      }

      Widget _buildSpace() {
        return SizedBox(height: 10.0);
      }
    }

所属分类

源码仓库

使用此插件的项目

暂无相关数据。