Capitalized the First Letter of Every Word in the String in Flutter

With the help of the extension method, you can easily capitalize the first letter of every word in a string in your Dart or Flutter code. we first define an extension method called capitalize() on the String class. This method capitalizes the first letter of the string by converting the first character to uppercase using the toUpperCase() method, and then concatenating it with the rest of the string using the substring() method.

How to Use?

Dart

String myString = "hello world";
String capitalizedString = myString.split(' ').map((word) => word.capitalize()).join(' ');

// "Hello World"
print(capitalizedString);

• String myString = “hello world” – Declares a string variable called myString with the value “hello world”.
• String capitalizedString = myString.split(‘ ‘).map((word) => word.capitalize()).join(‘ ‘); – Splits the myString variable into individual words using the split() method with a space delimiter, maps over the resulting list of words using the map() method with an anonymous function that calls the capitalize() method (not defined yet), and then joins the modified words back together with a space delimiter using the join() method. The resulting string with the capitalized words is assigned to the capitalizedString variable.
• print(capitalizedString); // “Hello World” – Prints the capitalized string to the console.

Define the capitalize() Method

Dart

extension StringExtensions on String {
  String capitalize() {
    return "${this[0].toUpperCase()}${this.substring(1)}";
  }
}

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in vs code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

A material package gives us the essential functions and Parameters, now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

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

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});

@override
Widget build(BuildContext context) {
  return MaterialApp();
 }
}

Step 4: Working with Scaffold Widget

Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
appBar: AppBar(
  title: Text('Appbar'),
),
body: 
),

Step 5: Display the string in the body of the app

Finally, we create a Text widget that displays the capitalizedString and originalString variable in the center of the screen using a TextStyle with a font size of 20 and FontWeight.w200.

Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Text(
               'Original String - ${myString}',
               style: TextStyle(fontWeight: FontWeight.w200, fontSize: 20),
             ),
             Text(
               'Capitalized String - ${capitalizedString}',
               style: TextStyle(fontWeight: FontWeight.w200, fontSize: 20),
             )
           ],
         ),
       ),

We are using the center widget, further, we use the Column widget as a child, and then using the text widget we show the strings.

Code Example

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    String myString = "Capitalized the first letter of every word the string";
    String capitalizedString =
        myString.split(' ').map((word) => word.capitalize()).join(' ');

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title:
              Text('Capitalized the First letter of every word of the string'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Original String - ${myString}',
                style: TextStyle(fontWeight: FontWeight.w200, fontSize: 20),
              ),
              Text(
                'Capitalized String - ${capitalizedString}',
                style: TextStyle(fontWeight: FontWeight.w200, fontSize: 20),
              )
            ],
          ),
        ),
      ),
    );
  }
}

extension StringExtensions on String {
  String capitalize() {
    return "${this[0].toUpperCase()}${this.substring(1)}";
  }
}

Output