Flutter Multi-Line TextFormField

Hi Guys, Welcome to Proto Coders Point.

In this Flutter Tutorial we will learn how to implement a text field with multiline input supported.
Means a user can input more then one line in textfield.

By Default, a TextFormField widget is set to single line input, but some time a user might want to Enter lines of Text message in the textfield & the TextField size must got extending as the user enter the text.

Allow textFormField with multiple lines input

So to make a TextField accept multiple lines, simply make use of maxLines property in TextField or TextFormField widget.

And keyboardType property set it to TextInputType.multiline, so that user will get a button using which he/she can move the cursor to next line.

Eg:

TextField

TextField(
              minLines: 1,
              maxLines: 5,  // allow user to enter 5 line in textfield
              keyboardType: TextInputType.multiline,  // user keyboard will have a button to move cursor to next line
              controller: _Textcontroller,
            ),

TextFormField

TextFormField(
              minLines: 1,
              maxLines: 5,  // allow user to enter 5 line in textfield
              keyboardType: TextInputType.multiline,  // user keyboard will have a button to move cursor to next line
              controller: _Textcontroller,
            ),

Complete Source – Multiline input textfield flutter- TextEditingController

Here is Complete Source code, Flutter Multline TextField and TextEditingController to handle text that is been entered by user.

Video Tutorial

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:read_json_file/MutltTextFieldline.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiLineTextField(), // call page to display
    );
  }
}

MultiLineTextField.dart

import 'package:flutter/material.dart';

class MultiLineTextField extends StatefulWidget {
  @override
  _MultiLineTextFieldState createState() => _MultiLineTextFieldState();
}

class _MultiLineTextFieldState extends State<MultiLineTextField> {
  // text controller to handle user entered data in textfield
  final TextEditingController _Textcontroller = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
           (_Textcontroller.value.text.isEmpty) ? Text("Please Enter Message") :Text('Sent Message: ${_Textcontroller.value.text}'),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: TextFormField(
                controller: _Textcontroller,
                minLines: 2,
                maxLines: 5,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                  hintText: 'Enter A Message Here',
                  hintStyle: TextStyle(
                    color: Colors.grey
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  )
                ),
              ),
            ),
            TextFormField(
              minLines: 1,
              maxLines: 5,  // allow user to enter 5 line in textfield
              keyboardType: TextInputType.multiline,  // user keyboard will have a button to move cursor to next line
              controller: _Textcontroller,
            ),
            ElevatedButton(onPressed: (){
              setState(() {
                _Textcontroller.notifyListeners();
              });
            },child: Text("Send Message"),)
          ],
        ),
      ),
    );
  }
}