How to Set Initial Default Text on TextField in Flutter

In this example, we are going to show you how to supply the initial default text value on TextField or TextFormField Input widgets. TextField is an important widget in Flutter. See the example below:

Declare Controller for TextField or TextFormField:

TextEditingController textarea = TextEditingController();

Supply Initial Default Text:

textarea.text = "Hello World";

Apply on controller property of TextField or TextFormField:

TextField(
  controller: textarea
)

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
  void initState() {
    textarea.text = "Hello World"; //default text
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Set Default Text on TextField"),
            backgroundColor: Colors.redAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children: [
                   TextField(
                      controller: textarea,
                      decoration: InputDecoration( 
                         hintText: "Enter Remarks",
                         focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(width: 1, color: Colors.redAccent)
                         )
                      ), 
                   ),

                   ElevatedButton(
                     onPressed: (){
                         print(textarea.text);
                     }, 
                     child: Text("Get TextField Value")
                    )
               ],
             ),
          )
      );
  }
}

In this way, you can set the initial default text value on TextField or TextFormField Input widgets in Flutter. 

No any Comments on this Article


Please Wait...