Flutter中如何在system_alert_window内实现TextField？

我使用system_alert_window库实现系统弹窗，需要在该弹窗中添加输入框，现咨询以下问题：

1. 如何直接在该弹窗中实现TextField？
2. 是否有其他方式可在system_alert_window的系统弹窗中添加输入框？

当前弹窗实现代码：

SystemWindowHeader header = SystemWindowHeader(
    title: SystemWindowText(
        text: "Incoming Call", fontSize: 10, textColor: Colors.black45),
    padding: SystemWindowPadding.setSymmetricPadding(12, 12),
    subTitle: SystemWindowText(
        text: "9898989899",
        fontSize: 14,
        fontWeight: FontWeight.BOLD,
        textColor: Colors.black87),
    decoration: SystemWindowDecoration(startColor: Colors.grey[100]),
    button: SystemWindowButton(
        text: SystemWindowText(
            text: "Spam", fontSize: 10, textColor: Colors.black45),
        tag: "spam_btn"),
    buttonPosition: ButtonPosition.TRAILING);
SystemWindowBody body = SystemWindowBody(
  rows: [
    EachRow(
      columns: [
        EachColumn(
          text: SystemWindowText(
              text: "Some body", fontSize: 12, textColor: Colors.black45),
        ),
      ],
      gravity: ContentGravity.CENTER,
    ),

  ],
  padding: SystemWindowPadding(left: 16, right: 16, bottom: 12, top: 12),
);
SystemWindowFooter footer = SystemWindowFooter(
    buttons: [
      SystemWindowButton(
        text: SystemWindowText(
            text: "Simple button", fontSize: 12, textColor: Colors.blue),
        tag: "simple_button",
        padding:
            SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10),
        width: 0,
        height: SystemWindowButton.WRAP_CONTENT,
        decoration: SystemWindowDecoration(
            startColor: Colors.white,
            endColor: Colors.white,
            borderWidth: 0,
            borderRadius: 0.0),
      ),
      SystemWindowButton(
        text: SystemWindowText(
            text: "Focus button", fontSize: 12, textColor: Colors.white),
        tag: "focus_button",
        width: 0,
        padding:
            SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10),
        height: SystemWindowButton.WRAP_CONTENT,
        decoration: SystemWindowDecoration(
            startColor: Colors.lightBlueAccent,
            endColor: Colors.blue,
            borderWidth: 0,
            borderRadius: 30.0),
      )
    ],
    padding:
        SystemWindowPadding(left: 16, right: 16, bottom: 12, top: 10),
    decoration: SystemWindowDecoration(startColor: Colors.white),
    buttonsPosition: ButtonPosition.CENTER);
SystemAlertWindow.showSystemWindow(
    height: 230,
    header: header,
    body: body,
    footer: footer,
    margin: SystemWindowMargin(left: 8, right: 8, top: 200, bottom: 0),
    gravity: SystemWindowGravity.TOP,
    notificationTitle: "Incoming Call",
    notificationBody: "+1 646 980 4741",
    prefMode: prefMode,
    backgroundColor: Colors.black12,
    isDisableClicks: false);
setState(() {
  _isShowingWindow = true;
});

弹窗示例图：

问题解答 #

1. 能否直接在该弹窗中实现TextField？

不行。system_alert_window的系统弹窗基于Android/iOS原生窗口实现，不属于Flutter的Widget渲染树，无法直接嵌入Flutter的TextField组件。该库提供的组件均为封装的原生视图，没有对应Flutter TextField的直接API。

2. 其他添加输入框的方式

有两种可行方案：

• 方案一：利用库的原生输入组件支持
  部分新版本的system_alert_window可能新增了原生输入框的配置项（如Android的EditText、iOS的UITextField）。你可以查看库的文档，确认是否有类似SystemWindowInput的组件，通过配置输入框的提示文本、字体、颜色等属性，将其添加到SystemWindowBody的rows中。

• 方案二：自定义原生视图嵌入
  如果库没有现成的输入组件，可通过自定义原生布局实现：

  1. Android端：创建包含EditText的XML布局文件，通过system_alert_window的API加载该布局到弹窗中；
  2. iOS端：创建包含UITextField的UIView，通过库的自定义视图接口嵌入；
  3. 通过MethodChannel实现Flutter与原生输入框的数据交互，获取输入内容。

内容的提问来源于stack exchange，提问作者Anandh Krishnan