How can I make my textfield be the same size as the send button

Question

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.

why don't you wrap it in SizedBox? – Diwyansh Dec 23 '21 at 16:56 — Diwyansh, Dec 23 '21 at 16:56
Becuase the textfield expands when having multiple lines – anonymous-dev Dec 23 '21 at 16:59 — anonymous-dev, Dec 23 '21 at 16:59

Jahidul Islam · Accepted Answer · 2021-12-23T17:00:13.687

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)),
        )
      ],
    )

Hey I think you misunderstood. The width of the button is good. It's just the height that needs to match. How did you come by the height of 48, that seems to be the correct height. Will that work on all devices? — anonymous-dev, Dec 23 '21 at 16:51
got your point give a moment, it's adjust for all devices because textfield default height is 48 and read this article https://groups.google.com/g/flutter-announce/c/RDyeXZK0fO8/m/rdkBzgw4DgAJ?pli=1 — Jahidul Islam, Dec 23 '21 at 16:52
Otherwise you can do with content padding inside textfield, follow the updated code part — Jahidul Islam, Dec 23 '21 at 16:59
Aah I see the height is always 48, I did not know that. Thanks! — anonymous-dev, Dec 23 '21 at 16:59
you are welcome and for text button height you can follow my previous answer in SO https://stackoverflow.com/questions/66900829/how-to-change-the-flutter-textbutton-height/66900889#66900889 — Jahidul Islam, Dec 23 '21 at 17:01

How can I make my textfield be the same size as the send button

1 Answers1