How to Capitalize First Letter of TextFormField in Flutter: Easy Guide

Flutter TextFormField capitalize first letter

Hey guys. I'm Aarthi Krishnan. In this blog let me show you Capitalize first letter TextFormField in Flutter 

Introduction

Lets see Capitalize first letter TextFormField Flutter: Make your app function properly Flutter text input capitalize first letter. In the process of developing a Flutter app, you may need to customize text input fields to suit your requirements. One of the most common requests is to have the first letter of a TextFormField capitalized automatically when a user begins typing. This feature can improve the user experience and ensure consistency in data entry. In this guide, we will discuss how you can easily implement this functionality in your Flutter app.

This function _onTextChanged() capitalizes the first letter of the input text in a TextFormField and updates the text controller accordingly while maintaining the cursor position at the end of the text.

 	void _onTextChanged() {
    final text = _controller.text;
    if (text.isNotEmpty) {
      _controller.value = _controller.value.copyWith(
        text: text.substring(0, 1).toUpperCase() + text.substring(1),
        selection: TextSelection.collapsed(offset: text.length),
      );
    }

Here is full source code for your reference:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Capitalizing Text Field'),
        ),
        body: CapitalizingTextField(),
      ),
    );
  }
}

class CapitalizingTextField extends StatefulWidget {
  @override
  _CapitalizingTextFieldState createState() => _CapitalizingTextFieldState();
}

class _CapitalizingTextFieldState extends State<CapitalizingTextField> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(_onTextChanged);
  }

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

  void _onTextChanged() {
    final text = _controller.text;
    if (text.isNotEmpty) {
      // Capitalize the first letter
      final newText = text.substring(0, 1).toUpperCase() + text.substring(1);
      // Prevent infinite loop by only updating if the text has changed
      if (newText != _controller.text) {
        _controller.value = _controller.value.copyWith(
          text: newText,
          selection: TextSelection.collapsed(offset: newText.length),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: TextField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: 'Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

by only updating if the text has changed
      if (newText != _controller.text) {
        _controller.value = _controller.value.copyWith(
          text: newText,
          selection: TextSelection.collapsed(offset: newText.length),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: TextField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: 'Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

It's easy to add Capitalize first letter TextFormField Flutter app. This customization can improve user experience and enhance your app's polish. Thank you so much that it about Flutter TextFormField capitalize first letter