如何在扑朔迷离的盒子周围创建虚线边框？

Question

我正在使用flutter在我的应用程序中构建盒子布局列表。我想在框子周围的虚线边框。我已使用card小部件创建框。但是，如何使框周围出现虚线边框？

Answer 1

您可以使用dotted_border Flutter 包

return DottedBorder(
   borderType: BorderType.RRect,
   radius: Radius.circular(20),
   dashPattern: [10, 10],
   color: Colors.grey,
   strokeWidth: 2,
   child: Card(
       color: Colors.amber,
       shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
       ),
       child: Center(child: Text("hi")),
   )

Answer 2

编辑

我已经将此添加为pub中的软件包。

现在，您需要做的就是

DottedBorder(
  color: Colors.black,
  gap: 3,
  strokeWidth: 1,
  child: FlutterLogo(size: 148),
)

工作解决方案[已过时]

就像tomerpacific在此答案中说的那样，Flutter目前没有默认的虚线边框实现。

昨天我工作了一段时间，并且能够使用解决方案CustomPainter。希望这对某人有帮助。

DashedRect像这样将添加到您的容器中

DottedBorder(
  color: Colors.black,
  gap: 3,
  strokeWidth: 1,
  child: FlutterLogo(size: 148),
)

虚线框

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 400,
          width: 300,
          color: Colors.black12,
          child: DashedRect(color: Colors.red, strokeWidth: 2.0, gap: 3.0,),
        ),
      ),
    );
  }
}

我不希望这适合所有用例，并且有很大的定制和改进空间。如果发现任何错误，请发表评论。

Answer 3

There is an one plugin for draw dotted border around widgets

https://pub.dev/packages/dotted_border

Using this plugin you can draw dotted or dashed border

//1. Install the plugin by add dependencies in pubspace.yaml
dotted_border: ^1.0.6

Add below code for show border

DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)