TextFormField alignment with maxLength

[omatt]

Steps to Reproduce

I'd like to align TextFormFields in a Row with one of them has maxLength configured. Same behavior occurs on mobile and web.

Row(
  children: [
    Expanded(
      child: TextFormField(
        maxLength: characterLimit,
      ),
    ),
    Expanded(
      child: TextFormField(),
    ),
  ]
)

Understandably, maxLength inflates the space at the bottom of the TextFormField. Its appearance beside a TextFormField without a maxLength isn't desirable due to misalignment.

Displaying a validator message aligns both TextFormFields.

Using Align(alignment: Alignment.top) does nothing since both TextFormField has the same height even with one of them having maxLength. Using Padding(padding: EdgeInsets.only(bottom: paddingBottom)), both TextFormField will now have the same alignment by default due to the offset given by the Padding. But the misalignment appears upon displaying the validator message.

1. Run the minimal repro
2. Click the FloatingActionButton to validate the TextFormFields

Minimal Repro

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final _subscriptionFormKey = GlobalKey<FormState>();

  void _validate() {
    if (_subscriptionFormKey.currentState!.validate()) {}
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _subscriptionFormKey,
        child: Row(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  validator: (message) {
                    if (message == null || message.isEmpty) {
                      return 'Empty field';
                    }
                    return null;
                  },
                  maxLength: 300,
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  validator: (message) {
                    if (message == null || message.isEmpty) {
                      return 'Empty field';
                    }
                    return null;
                  },
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _validate,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Expected results:

TextFormField should have the same alignment with/without maxLength.

Actual results:

TextFormField with maxLength configured has a different alignment.

Logs

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-x64, locale en)
    • Flutter version 2.2.3
    • Framework revision f4abaa0735 (6 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK 
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_221-b11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.59.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (2 available)
    • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86    • Android 9 (API 28) (emulator)
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 92.0.4515.131

! Doctor found issues in 1 category.

[omatt]

Found a fix by using Row(crossAxisAlignment: CrossAxisAlignment.start).

[github-actions]

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.