如何构建库比蒂诺文字菲尔德

Question

我该如何在扑朔迷离中取得这样的成就？ 我说的是格雷上的2个textfield。他们是Cupertino Textfield吗？

Answer 1

使用

 Container(
        padding: EdgeInsets.all(8),
        height: 100,
        width: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.grey.shade300,
        ),
        child: Column(
          children: [
            CupertinoTextField(
              placeholder: 'Required',
              prefix: Text(
                'Name',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              decoration: BoxDecoration(),
            ),
            Divider(
              thickness: 1,
              color: Colors.grey,
            ),
            CupertinoTextField(
              prefix: Text(
                'Card Number',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              decoration: BoxDecoration(),
            ),
          ],
        ),
      ),

结果屏幕 - ＆gt;

使用 /strong>

  Container(
        padding: EdgeInsets.all(8),
        height: 135,
        width: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.grey.shade300,
        ),
        child: Column(
          children: [
            TextField(
              decoration: new InputDecoration(
                prefixIcon: Padding(
                  padding: EdgeInsets.only(
                    top: 15,
                  ),
                  child: Text(
                    'Name',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
                hintText: "Required",
              ),
            ),
            Divider(
              thickness: 1,
              color: Colors.grey,
            ),
            TextField(
              decoration: new InputDecoration(
                prefixIcon: Padding(
                  padding: EdgeInsets.only(
                    top: 15,
                    right: 10,
                  ),
                  child: Text(
                    'Card Number',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
              ),
            ),
          ],
        ),
      ),

结果屏幕 - ＆gt;

Answer 2

您可以使用Cupertinotextfield.borderless来满足您的要求。以下是一个示例：

Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
                color: Colors.grey[400],
                borderRadius: BorderRadius.circular(10)),
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                CupertinoTextField.borderless(
                  padding: EdgeInsets.only(left: 65, top: 10, right: 6, bottom: 10),
                  prefix: Text('Name'),
                  placeholder: 'Required',
                ),
                Divider(
                  thickness: 1,
                  color: Colors.black,
                ),
                CupertinoTextField.borderless(
                  padding: EdgeInsets.only(left: 15, top: 10, right: 6, bottom: 10),
                  prefix: Text('Card Number'),
                ),
              ],
            ),
          ),
        )

使用窗口小部件参数来根据自己的需求进行自定义。