Multiline TextField in Flutter

Multiline TextField is the input TextField which takes the input in more than one line, This type of TextField is used in the scenario like taking Feedback from the user, User Comments, and Description, etc., We can achieve multiline TextField by setting the property keyBoardType and maxLines of the TextField.

A sample video given below gives an idea of what we are going to implement.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
    runApp(RunMyApp());
}

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the materialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
    const RunMyApp({super.key});
    
    @override
    Widget build(BuildContext context) {
        return MaterialApp();
    }
}

Step 4: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. The body has the TextField with its properties keyboardType, minLines, maxLines.

home: Scaffold(
    appBar: AppBar(
        title: Text('MultiLine TextField'),
    ),
    body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
            keyboardType: TextInputType.multiline,
            minLines: 1, //Normal textInputField will be displayed
            maxLines: 5, // when user presses enter it will adapt to it
        ),
    ),
),

Final Code:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('MultiLine TextField'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            keyboardType: TextInputType.multiline,
            minLines: 1, // Normal textInputField will be displayed
            maxLines: 5, // When user presses enter it will adapt to it
          ),
        ),
      ),
    );
  }
}

Output: