How to Add TextField with Multi-Line Support in Flutter

By default, a TextField widget is limited to single line. But in case your users need to input large text then the TextField should be extensible. In this Flutter tutorial, let’s check how to add multi line support to the TextField widget.

You add multiple lines to the TextField by using the property maxLines. There you can mention the maximum lines you want for that specific TextField.

TextField(
          keyboardType: TextInputType.text,
          maxLines: 3,
          controller: myController,
        ),

Following is the complete example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextInput MultiLine Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextInput Multiple Lines'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              keyboardType: TextInputType.text,
              maxLines: 3,
              controller: myController,
            ),
          ),
        ));
  }
}

Following is the output.

flutter textfield multiple lines example

This is how you add multiple lines to TextField in Flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *