How can I align a TextFormField on AppBar in vertical center?

[jaggerwang]

Problem

The TextFormField on AppBar is a little higher than the back button on AppBar, and having space on left and right. As the following screenshot shows.

I want to align vertical center and removing the left and right space, to simulate a search bar.

Code

class TumblrSearchInputScreen extends StatefulWidget {
  final String initialTag;
  final void Function(String) search;

  TumblrSearchInputScreen({
    Key key,
    this.initialTag,
    @required this.search,
  }) : super(key: key);

  @override
  _TumblrSearchInputScreenState createState() =>
      _TumblrSearchInputScreenState();
}

class _TumblrSearchInputScreenState extends State<TumblrSearchInputScreen> {
  static final _bodyKey = GlobalKey<_BodyState>();

  final _formKey = GlobalKey<FormState>();
  TextEditingController _textController;
  String tag = '';

  @override
  void initState() {
    super.initState();

    _textController = TextEditingController(text: widget.initialTag);
  }

  void _submit() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      widget.search(tag);
      Navigator.of(context).pop();
    }
  }

  String _validateTag(String tag) {
    if (tag.isEmpty) {
      return '请输入关键字';
    }
    return '';
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
      converter: (store) => _ViewModel(
            tags: store.state.tumblr.tags,
          ),
      builder: (context, vm) => Scaffold(
            appBar: AppBar(
              // automaticallyImplyLeading: false,
              title: Form(
                key: _formKey,
                child: TextFormField(
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    // prefixIcon: IconButton(
                    //   onPressed: () => Navigator.of(context).pop(),
                    //   icon: Icon(Icons.arrow_back, color: TblTheme.whiteLight),
                    // ),
                    hintText: '请输入关键字',
                    hintStyle: TextStyle(color: TblTheme.whiteNormal),
                    suffixIcon: GestureDetector(
                      onTap: Feedback.wrapForTap(
                        _textController.clear,
                        context,
                      ),
                      child: Icon(Icons.clear, color: TblTheme.whiteLight),
                    ),
                  ),
                  validator: _validateTag,
                  onSaved: (value) => tag = value.trim(),
                  onFieldSubmitted: (value) => _submit(),
                  autofocus: true,
                  maxLength: 20,
                  controller: _textController,
                  style: TextStyle(
                    color: TblTheme.whiteNormal,
                    fontSize: TblTheme.fontSizeLarge,
                  ),
                ),
              ),
            ),
            body: _Body(
              key: _bodyKey,
              vm: vm,
              search: widget.search,
            ),
          ),
    );
  }
}

[diegoveloper]

You can center the textfield giving a padding to your InputDecoration:

InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(vertical: 15.0), 
                ...

And you can't remove the left/right padding because you are using the title property from AppBar and it has it owns layout/calculations, you could check the source code.

What you can do is remove the suffixIcon from your TextFormField and add it as an actions for the AppBar:

appBar: AppBar(
        // automaticallyImplyLeading: false,
        actions: <Widget>[
          GestureDetector(
                  onTap: Feedback.wrapForTap(
                    _textController.clear,
                    context,
                  ),
                  child: Padding(
                     padding: const EdgeInsets.all(8.0),
                      child: Icon(Icons.clear, color: Colors.white),
                   ),
                )
        ],

[zoechi]

@jaggerwang
How-to questions are better asked on StackOverflow.
Did above suggestion work for you?

[jaggerwang]

It's worked!

[JohnnyDevX]

It works but it's not flexible.

If the appbar height changes, the input won't be properly aligned.

I tried for hours to do this seemingly simple thing - just place TextField as AppBar title and center it vertically and failed...

I tried all possible combinations of Rows Columns Expands Flexibles etc... and none of this worked.

I really don't like this solution with hardcoded padding.

Is there better solution with Flex or the Flutter is just so awkward that it makes it impossible?

[JohnnyDevX]

Also I have set a custom font size in the TextField so the padding is not 15.0 anymore... its not even a whole number and I have to guess it. Very ugly practice :/

[oozd]

@JohnnyDevX Did you find a solution for alignment with custom height appbar?

[Nandhini-Ravichandran]

The preferred size is given then the app bar title not aligned in the vertical center

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.