如何在textField中添加容器?

时间:2020-10-20 21:44:03

标签: flutter dart

我尝试将textField包裹在一行中,并在该行中添加一个容器,但会引发错误,并且表单的其余部分无法呈现。 而且对textField使用prefix属性也不起作用,因为当按下textField时会显示容器,但是我希望即使textField不活动也能看到它。

this is the required UI for the mobile no. field I'm trying to build

1 个答案:

答案 0 :(得分:0)

Container(
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(8),
  ),
  child: Row(
    children: [
      Container(
        height: 50,
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(
          horizontal: 8,
        ),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8),
            bottomLeft: Radius.circular(8),
          ),
        ),
        child: Text(
          "+91",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 12,
          ),
          child: TextField(
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: "Mobile No."
            ),
          ),
        ),
      )
    ],
  ),
)

结果:

demo