Flutter : credit card textfield style all details in single texfield

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