Flutter：信用卡文本字段樣式在單個文本字段中的所有詳細信息

Question

我希望用 flutter 為信用卡做這種特殊類型的 texfield。在一個 texfield 中，在 texfield 的同一行中有所有數字、過期日期和 cvv 。 謝謝你的幫助。

文本域基本代碼示例：

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

我不知道有一種解決方案可以讓您在一個 TextField 中擁有多個 TextField。 不過，您可以做的是讓它看起來像您擁有的那樣。

在下面的代碼中，我制作了一個帶有裝飾的容器，使其看起來像一個 TextField。 Container 將 Form 作為子項，而 Form 將 Row 作為子項。 在 Row 中，我將 TextFields 作為子項放置。

確保您不使用固定寬度，而是使用 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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}