I have the following text field

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playground',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.green,
      body: Align(
        alignment: Alignment.bottomCenter,
        child: ResponsiveInput(),
      ),
    );
  }
}

class ResponsiveInput extends StatelessWidget {
  const ResponsiveInput({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: TextFormField(
            maxLines: 8,
            minLines: 1,
            decoration: const InputDecoration(
              fillColor: Colors.white,
              filled: true,
            ),
          ),
        ),
        TextButton(
          onPressed: () => false,
          child: const Text('Send'),
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.orange)),
        )
      ],
    );
  }
}

Which looks like

The texfield can have max 8 lines of text and 1 minimal line. But when it is empty I want it to be the same height as the send button. But now there seems to be some sort of marging below and above the text button.

CodePudding user response：

You almost there, just use expanded your both textfield and button and wrap your button with container and set height.

class ResponsiveInput extends StatelessWidget {
  const ResponsiveInput({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          flex: 3,
          child: TextFormField(
            maxLines: 8,
            minLines: 1,
            decoration: const InputDecoration(
              fillColor: Colors.white,
              filled: true,
            ),
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            height: 48,
            child: TextButton(
              onPressed: () => false,
              child: const Text('Send'),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.orange)),
            ),
          ),
        )
      ],
    );
  }
}

Updated answer:

Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: TextFormField(
            maxLines: 8,
            minLines: 1,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.all(8),
              labelText: 'Even Densed TextFiled',
              isDense: true,
              fillColor: Colors.white,
              filled: true,// Added this

            ),
          ),
        ),
        TextButton(
          onPressed: () => false,
          child: const Text('Send'),
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.orange)),
        )
      ],
    )