How to Make Multi Line TextField Input TextArea in Flutter

Verified Solution Tested on Flutter 3.47.7 • Dart 3.13.5

In this example, we are going to show you how to expand TextField to multi-line like textarea in HTML. TextArea are important components that are used to enter long inputs.

How to Make Multi-line TextField in Flutter:

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 4  
)

TextInputType.multiline will set Keyboard type with line break button, and 4 is a standard number of line that looks exactly like textarea in HTML.

Full Flutter Code:

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  TextEditingController textarea = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Multi Line TextField"),
            backgroundColor: Colors.redAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children: [
                   TextField(
                      controller: textarea,
                      keyboardType: TextInputType.multiline,
                      maxLines: 4,
                      decoration: InputDecoration( 
                         hintText: "Enter Remarks",
                         focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(width: 1, color: Colors.redAccent)
                         )
                      ),
                       
                   ),

                   ElevatedButton(
                     onPressed: (){
                         print(textarea.text);
                     }, 
                     child: Text("Get TextField Value")
                    )
               ],
             ),
          )
      );
  }
}

Output Screenshot:

How to Make Multi Line TextField Input TextArea in Flutter illustration

In this way, you can make TextField multi-line that looks like TextArea in Flutter. To toggle editable and review states on multiline forms, learn about making TextFields read only and styling TextField borders.

Updated Flutter Example

SDK: Flutter 3.47.7 • Dart 3.13.5 Verified on Flutter 3.47.7 (Stable)

Updated Flutter Example

Modern Multiline Text Area with Character Counter

Key Implementation Details & Modern Differences:

Adaptive Multiline Configuration: Pairs minLines: 4 and maxLines: 6 with TextInputType.multiline for ergonomic expanding input fields.
Character Limit Enforcement: Incorporates maxLength with built-in visual counters to keep user submissions within allowable bounds.
Label Alignment & Fill: Applies alignLabelWithHint: true and Material 3 outline container styling for polished form presentation.

Updated Flutter Example Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: ModernTextAreaDemo()));
}

class ModernTextAreaDemo extends StatefulWidget {
  const ModernTextAreaDemo({super.key});

  @override
  State<ModernTextAreaDemo> createState() => _ModernTextAreaDemoState();
}

class _ModernTextAreaDemoState extends State<ModernTextAreaDemo> {
  final TextEditingController _feedbackController = TextEditingController();
  static const int _maxChars = 200;

  @override
  void dispose() {
    _feedbackController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Modern Multiline Text Area'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              controller: _feedbackController,
              keyboardType: TextInputType.multiline,
              minLines: 4,
              maxLines: 6,
              maxLength: _maxChars,
              decoration: InputDecoration(
                labelText: 'Detailed Documentation Notes',
                hintText: 'Enter observations, test steps, or code commentary...',
                alignLabelWithHint: true,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                filled: true,
              ),
            ),
            const SizedBox(height: 12),
            FilledButton.icon(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Notes recorded successfully')),
                );
              },
              icon: const Icon(Icons.send),
              label: const Text('Save Notes'),
            ),
          ],
        ),
      ),
    );
  }
}

Document History & Archival Record

Original reference snapshot archived January 7, 2023. Updated working solution verified on modern Flutter & Dart SDKs.