如何在flutter中添加虚线TableBorder小部件？

Question

我需要帐单收据带有虚线，以获得视觉上吸引人的 UI

1. 我希望帐单收据包含虚线，以创建具有视觉吸引力的 UI。

Table(
            border: TableBorder(
              horizontalInside: BorderSide(
                color: Colors.black,
                width: 2,
              ),
            ),

--------------------------------------
          SUPER MART

Date: 05/18/2024   Time: 12:34 PM
--------------------------------------
Item                Qty     Price
--------------------------------------
Milk (1L)           2       $2.50
Bread (1 loaf)      1       $1.99
Eggs (dozen)        1       $3.00
Apples (1 lb)       3       $1.20
Butter (250g)       1       $2.75
--------------------------------------
Subtotal:                   $12.64
Tax (5%):                   $0.63
--------------------------------------
Total:                     $13.27
--------------------------------------
      Thank you for shopping!
--------------------------------------

Answer 1

一个 flutter 包，可以轻松在小部件周围添加点状边框。

安装中 要使用 this 包，请将

dotted_border

添加为

pubspec.yaml

文件中的依赖项。

使用方法 将 DottedBorder 小部件包裹在子小部件周围

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