Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Make Multi Line TextField Input like TextArea in Flutter

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:

  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 {
  State<Home> createState() => _HomeState();

class _HomeState extends State<Home> {

  TextEditingController textarea = TextEditingController();

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

                     onPressed: (){
                     child: Text("Get TextField Value")

Output Screenshot:

In this way, you can make TextField multi-line that looks like TextArea in Flutter.

No any Comments on this Article

Please Wait...