Flutter : credit card textfield style all details in single texfield - flutter

Question

please i looking to do this particular kind of texfield for credit card with flutter. In a single texfield there have all number, exp date and cvv in the same line of texfield. Thank you for help.
Textfield basic code example :
import 'package:flutter/material.dart';
class MyCardField extends StatelessWidget {
final TextEditingController controller;
final String hintText;
const MyCardField({Key key, this.controller, this.hintText}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 16),
child: TextField(
controller: controller,
decoration: InputDecoration(
hintText: hintText,
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 16,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 2),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey[300], width: 2),
),
),
),
);
}
}

Answer 1

I am not aware of a solution that lets you have multiple TextFields in one TextField. What you can do though, is make it look like you have.
In the code below I have made a Container with decoration making it look like a TextField. The Container takes a Form as a child and the Form takes a Row as a child. Inside the Row I put the TextFields as children.
Make sure you don't use fixed whidts, but rather calculate the devices width using MediaQuery.of(context).size.width.
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
final GlobalKey _formKey = GlobalKey();
final TextEditingController cardNumberController;
final TextEditingController expireDateController;
final TextEditingController cvcController;
final String hintText;
Test({
Key key,
this.cardNumberController,
this.hintText,
this.expireDateController,
this.cvcController,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Container(
margin: EdgeInsets.all(4),
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black38),
),
child: Form(
key: _formKey,
child: Row(
children: [
SizedBox(
width: 190,
child: TextField(
controller: cardNumberController,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon:
Icon(Icons.credit_card, color: Colors.black54),
labelText: 'Card number',
labelStyle: TextStyle(
color: Colors.black54,
fontSize: 12,
),
),
),
),
Expanded(
child: TextField(
controller: expireDateController,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: 'MM/YY',
labelStyle: TextStyle(
color: Colors.black54,
fontSize: 12,
),
),
),
),
SizedBox(
width: 90,
child: TextField(
controller: cvcController,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: 'CVC',
labelStyle: TextStyle(
color: Colors.black54,
fontSize: 12,
),
),
),
),
],
),
),
),
TextButton(
onPressed: () {},
child: Text(
'Pay',
style: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
],
),
);
}
}