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

Issue

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

enter image description here

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.

Solution

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

Answered By – Jahidul Islam

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.