How to Make Multi Line TextField Input TextArea in Flutter

PHOTO EMBED

Mon Oct 10 2022 22:46:16 GMT+0000 (Coordinated Universal Time)

Saved by @2hibay #dart #flutter

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")
                    )
               ],
             ),
          )
      );
  }
}
content_copyCOPY

https://www.fluttercampus.com/guide/176/how-to-make-multi-line-textfield-input-textarea-in-flutter/