Text Widget with Styling in FLutter

❌

The text widget helps one create Text Elements and display them in the application. The Text widget can be customized according to what the user wants. For example, animation, colors, size, and so on can be customized.

Create Text Widget

The text widget takes in a mandatory string parameter. It can have other parameters such as TextStyle, Key, and so on. However, they are optional.

Basic Text Widget

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('Basic Text Widget'),

        ),

        body: Center(

          child: Text('Hello, Flutter!'),

        ),

      ),

    );

  }

}

Customizing Text Style

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('Custom Text Style'),

        ),

        body: Center(

          child: Text(

            'Stylish Text',

            style: TextStyle(

              fontSize: 24,

              fontWeight: FontWeight.bold,

              color: Colors.blue,

              letterSpacing: 2.0,

            ),

          ),

        ),

      ),

    );

  }

}

Text with Different Fonts

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('Custom Font Text'),

        ),

        body: Center(

          child: Text(

            'Custom Font',

            style: TextStyle(

              fontFamily: 'Pacifico', // Make sure to add the font to pubspec.yaml

              fontSize: 30,

              color: Colors.teal,

            ),

          ),

        ),

      ),

    );

  }

}

Rich Text Widget

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('Rich Text Example'),

        ),

        body: Center(

          child: RichText(

            text: TextSpan(

              text: 'Hello ',

              style: TextStyle(fontSize: 24, color: Colors.black),

              children: <TextSpan>[

                TextSpan(

                  text: 'Bold',

                  style: TextStyle(fontWeight: FontWeight.bold),

                ),

                TextSpan(text: ' World!'),

              ],

            ),

          ),

        ),

      ),

    );

  }

}

Text Alignment and Overflow Handling

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('Text Alignment & Overflow'),

        ),

        body: Center(

          child: Container(

            width: 200,

            child: Text(

              'This is a long text that might overflow if it doesn\'t fit in the container.',

              textAlign: TextAlign.center,

              overflow: TextOverflow.ellipsis, // Truncate with ellipsis

              style: TextStyle(fontSize: 18),

            ),

          ),

        ),

      ),

    );

  }

}

Text with Shadow and Background Color

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('Text Shadow & Background'),

        ),

        body: Center(

          child: Text(

            'Text with Shadow',

            style: TextStyle(

              fontSize: 30,

              color: Colors.white,

              backgroundColor: Colors.blue,

              shadows: [

                Shadow(

                  blurRadius: 10.0,

                  color: Colors.black,

                  offset: Offset(5.0, 5.0),

                ),

              ],

            ),

          ),

        ),

      ),

    );

  }

}

Step-by-Step Guide to Customizing Text Widgets in Flutter - Flutter Tutorial