How to Change Placeholder Text Style of TextField in Flutter

TextField is a very important widget that helps users to input text. Sometimes you may want to change the default placeholder style of TextField. In this Flutter tutorial, let’s check how to change the hintText style of the TextField widget.

Changing the hintText style is quite simple. You just need to use InputDecoration’s property named hintStyle.

TextField(
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              hintText: 'Enter your name',
              hintStyle: TextStyle(
                  fontSize: 30.0,
                  color: Colors.red,
                  fontWeight: FontWeight.bold),
            ),
            controller: myController,
          )

Following is the complete example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Placeholder Style Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter hintText style'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: TextField(
            keyboardType: TextInputType.text,
            autocorrect: false,
            decoration: InputDecoration(
              hintText: 'Enter your name',
              hintStyle: TextStyle(
                  fontSize: 30.0,
                  color: Colors.red,
                  fontWeight: FontWeight.bold),
            ),
            style: TextStyle(
                fontSize: 30.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
            controller: myController,
          ),
        ),
      ),
    );
  }
}

Following is the output.

flutter hintext style example

That’s how you change placeholder text style in Flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *