How to build a cupertino textfield

Question

How can I achieve something like this in Flutter? I am talking about the 2 textfield on grey. Are they a Cupertino Textfield?

Answer 1

Try below code

Using CupertinoTextField

 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(),
            ),
          ],
        ),
      ),

Result Screen->

Using TextField

  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,
              ),
            ),
          ],
        ),
      ),

Result Screen->