CODEWITHSUNDEEP
flutterdarttextfieldcenter
relascope
relascope

Reputation: 4646

Flutter TextField LabelText Center

The Desired Effect is to have Kartennummer and Passwort centrated.
How is this possible?

ErrorImage

I use a custom class for this:

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() => _ImpexTextFieldState();
}

class _ImpexTextFieldState extends State<ImpexTextField> {
  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: () => 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: <Widget>[
          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: () => setState(() {
              FocusScope.of(context).requestFocus(_focusNode);
            }),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }
}

Upvotes: 15

Views: 31548

Answers (11)

maira khalil
maira khalil

Reputation: 29

You can use contentPadding property of TextField like below:

// change the value as your need
contentPadding: EdgeInsets.only(
  top: 16,
  bottom: 16,
  left: 8,
  right: 8,
),

Upvotes: 0

Jack Heorhiian
Jack Heorhiian

Reputation: 199

There is a nice decision for this.
Try to use alignLabelWithHint: true.
As example:

TextField(
  keyboardType: TextInputType.number, 
  textAlign: TextAlign.center, 
  maxLines: 1, 
  decoration: InputDecoration(
    alignLabelWithHint: true, 
    enabledBorder: InputBorder.none, 
    contentPadding: EdgeInsets.zero, 
    focusedBorder: InputBorder.none, 
    border: InputBorder.none, 
    labelStyle: Theme.of(context).textTheme.headline6, 
    labelText: 'Amount (GPB)'.toUpperCase(),
  ),
),

Upvotes: 19

Hemil
Hemil

Reputation: 1016

In my case, the suffix was not centered with respect to the label. I replaced suffix with suffixIcon and the suffixIcon and label were not aligned correctly in the center

Upvotes: 1

R.Raman
R.Raman

Reputation: 82

You can Style TextFormField with Centered Text and Centered Label in Flutter by using textAlign and floatingLabelAlignment property. I use Flutter 2.10.4

 TextFormField(
    controller: textController,
    textAlign: TextAlign.center,
    decoration: 
        InputDecoration(
            border: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(5.0))),
            isDense: true,
            labelText: 'Label',
            hintText: 'Hint',
            floatingLabelAlignment: FloatingLabelAlignment.center,
            
            floatingLabelStyle: const TextStyle(fontSize: 16),
            labelStyle: const TextStyle(
                fontSize: 13, color: Color.fromARGB(255, 152, 121, 11))),
    
  )

Upvotes: 2

Nachiket Gohil
Nachiket Gohil

Reputation: 1213

A Very and Handy solution to Center the Label:

Since Label is accepting Widget after flutter 2.5.x, so you can wrap your Text widget into Center widget like this,

TextFormField(
  decoration: InputDecoration(
    label: const Center(
      child: Text("Your Centered Label Text"),
    ),
  ),
)

Note:

  • If Upper border is not Visible due to this, Then:

Try Wraping Center widget to Row, and give mainAxisSize: MainAxisSize.min, this will not cover the entire border

Upvotes: 20

Netsuen
Netsuen

Reputation: 11

Well, it's not perfect, but I achieved it by using Center() in the label. Sadly, it erases part of the upper border.

label: Center(child: Text('Label')),

Upvotes: 1

timilehinjegede
timilehinjegede

Reputation: 14043

You can achieve thus by using the textAlign property of the TextField and set it to TextALign.center.

Check the code below:

TextField(
  // use the text align property
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    labelText: 'Yay, it works',
    hintText: 'Center the text',
  ),
),

OUTPUT:

enter image description here

Upvotes: 0

MBK
MBK

Reputation: 3364

In My case, I need the text field to show some information and update them. So basically I am not strict about sticking with the labelText. So, I done the following trick to center the text.

Instead of using a label text you can use the Text itself and center it with textAlign property.

    textAlign: TextAlign.center

By using the controller, you can assign a text to the text field. Also, you can update the textfield if you need a labeltext like effect. (but no animation)

This is my code:

    TextEditingController timeText = TextEditingController()..text = '12:24 AM';

    ...

    TextField(
    controller: timeText,
    enabled: false,
    style: TextStyle(fontSize: 20),
    decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Center the text',
    alignLabelWithHint: true,
    ),
    textAlign: TextAlign.center,
    ),

OUTPUT

This is the output

Upvotes: 1

Avinabh chambial
Avinabh chambial

Reputation: 199

you can use the contentPadding: EdgeInsets.only(left: <Any_value>), property to move the label text

Upvotes: 1

Giles Correia Morton
Giles Correia Morton

Reputation: 872

I had a similar problem with labels, my solution was, as Ragu Swaminathan says, to create my own custom widget that used a Stack with the TextField on the bottom and faded Text widget above it. Obviously the text widget doesn't need to be faded but I was just mimicking the style of regular labels. 

class CenteredTextField extends StatelessWidget {
  final String label;
  final TextEditingController controller;

  CenteredTextField({
    @required this.label,
    this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Padding(
          padding: EdgeInsets.only(top: 12.5),
          child: TextField(
            textAlign: TextAlign.center,
            controller: controller,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(top: 4.0),
          child: Opacity(
            opacity: 0.7,
            child: Text(label),
          ),
        ),
      ],
    );
  }
}

Upvotes: 1

Swaminathan V
Swaminathan V

Reputation: 4781

Alignment for the label text appears in the screenshot is due to the presence of Prefix Icon. Label text will make a spacing according to the prefix icon present.

And for you, below is the same exact thing that makes the above design. 

TextField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.card_giftcard),
        hintText: 'Hint Text',
        labelText:'Label',        
        border: const OutlineInputBorder(),
      ),
    )

Try and let know, if that helps you.

EDIT: I think there is no proper way to align the label text alone.

Upvotes: 1

Related Questions