How to build a cupertino textfield - flutter

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

You can use cupertinotextfield.borderless to meet your requirements. Here is an example:
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'),
),
],
),
),
)
Play around with the widgets parameters to customise it to your own needs.

Answer 2

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->