title: Flutter TextField LabelText Center
body: <p>The Desired Effect is to have Kartennummer and Passwort centrated.<br />
  How is this possible?</p>
  <p><a href="https://i.stack.imgur.com/Gow5E.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Gow5E.png" alt="ErrorImage" /></a></p>
  <p>I use a custom class for this:</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:impex_shop/styles/impex_styles.dart';
  
  class ImpexTextField extends StatefulWidget {
    final TextEditingController controller;
    final bool obscureText;
    final TextInputType keyboardType;
    final String labelText;
    final IconData prefixIcon;
    final int maxLines;
    final TextInputAction textInputAction;
    final void Function(String) onSubmitted;
    final bool autofocus;
  
    const ImpexTextField(
        {Key key,
        this.controller,
        this.obscureText,
        this.keyboardType,
        this.labelText,
        this.prefixIcon,
        this.maxLines = 1,
        this.textInputAction,
        this.onSubmitted,
        this.autofocus = false})
        : super(key: key);
  
    @override
    _ImpexTextFieldState createState() =&gt; _ImpexTextFieldState();
  }
  
  class _ImpexTextFieldState extends State&lt;ImpexTextField&gt; {
    FocusNode _focusNode = FocusNode();
    Paint paint;
  
    InputDecoration buildTextInputDecoration(
        String labelText, TextEditingController controller, IconData prefixIcon) {
      return InputDecoration(
        labelText: labelText,
        labelStyle: TextStyle(
          color: ImpexColors.mainColor,
          height: 0.8, // 0,1 - label will sit on top of border
          background: paint,
        ),
        fillColor: ImpexColors.lightGrey,
        filled: true,
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: ImpexColors.grey,
            width: 1.0,
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: ImpexColors.secondaryColor,
            width: 2.0,
          ),
        ),
        suffixIcon: InkWell(
          onTap: () =&gt; controller.clear(),
          child: Icon(Icons.cancel),
        ),
        prefixIcon: prefixIcon == null ? null : Icon(prefixIcon),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
        child: ListView(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          children: &lt;Widget&gt;[
            Container(
              height: 12,
            ),
            TextField(
              textAlign: TextAlign.center,
              textAlignVertical: TextAlignVertical.center,
              focusNode: _focusNode,
              controller: widget.controller,
              obscureText: widget.obscureText ?? false,
              maxLines: widget.maxLines,
              textInputAction: widget.textInputAction,
              decoration: buildTextInputDecoration(
                  widget.labelText, widget.controller, widget.prefixIcon),
              keyboardType: widget.keyboardType,
              autofocus: widget.autofocus,
              onSubmitted: widget.onSubmitted,
              onTap: () =&gt; setState(() {
                FocusScope.of(context).requestFocus(_focusNode);
              }),
            ),
          ],
        ),
      );
    }
  
    @override
    void dispose() {
      _focusNode.dispose();
      super.dispose();
    }
  }
  </code></pre>