Multiline TextField in Flutter

Multiline TextField is the input value which takes input in more than the on line. This type text field is used in feedback, user comments, Description from the user. 

Let's take an example of a multiline text field. Two main property keyBoardType and maxline of the TextField of mobile application.

A Sample video given below.


Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Creating a TexField with multiple lines widget
 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 : 

 import 'package:flutter/material.dart';

 void main()
 {
   runApp(HomeScreen());
 }
 class HomeScreen extends StatelessWidget {
   const HomeScreen({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
           ),
         ),
       ),
     );
   }
 }

 

Step 5: Output of above example


Happy coding!

365Bloggy May 29, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 24
Zoom In and Out to TextView in Android
0 15
How to underline text in textview
0 17
Shine Effect in Android
0 19
How to Create Marquee Text in Android?
0 16
Our blogs
Archive