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 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:

How to Supply Initial Default Text Value on TextField:

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
)

Full Flutter Code Example:

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

Output Screenshot:

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...