I have the following widget

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 Scaffold(
      backgroundColor: Colors.green,
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 100,
          color: Colors.black,
          child: const ResponsiveInput(),
        ),
      ),
    );
  }
}

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

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

Which does the following

[![enter image description here][1]][1]

But how do I make the textfield fill the remaining space in the black container?

I tried using content padding, but what happens is that if the container has responsive height the text will be cut off. Even when using dense.

CodePudding user response：

You can use expands: true, maxLines: null, on TextFormField

expands If set to true and wrapped in a parent widget like Expanded or SizedBox, the input will expand to fill the parent.

Expanded(
  child: TextFormField(
    expands: true,
    maxLines: null,
    decoration: const InputDecoration(
      fillColor: Colors.white,
      filled: true,
    ),
  ),
),

More about expands