image - 9 Flutter 中的补丁替代方案？

Question

如何实现如下所示的设计？

该图像显示了一个带有文本的播放按钮。我不会将它创建为具有某种渐变的容器。这让我有两个选择

1. 在文本前后定义 2 个可增长的矩形，可用于随图像宽度缩放。
2. 为没有文本的图像定义 1 个可增长的矩形，然后以某种方式将文本放置在图像中，并允许按钮具有可缩放的大小。

但是，如果没有原生 android 的 9patch，我该怎么做呢？

编辑：

Container(
//        width: MediaQuery.of(context).size.width/2,
        child: FlatButton(
          onPressed: () => print('onPressed'),
          padding: EdgeInsets.zero,
          child: Ink.image(
            image: FileImage(File('btn_default_normal.9.png')),
            centerSlice: Rect.fromLTWH(18 - 1.0, 36 - 1.0, 2, 2),
            child: Text(
              'press me',
              style: TextStyle(color: Colors.blue, fontSize: 20),
            ),
          ),
        ),
      )

---

如何设置宽度？取消注释宽度给了我

这意味着按钮占用屏幕宽度的一半但不扩展。

标签： imageflutterandroid-layoutflutter-layoutnine-patch