Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

Sharpen your coding skills—try JavaScript challenges on TOOLX now!

advertisement

Text Widget with Styling in FLutter

Text 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



Flutter Widgets Text Widget Text in Flutter Text Widget in Flutter How to add text in flutter Text Styling in FLutter customizing text in flutter rich text widget in flutter rich text in flutter

advertisement


Profile Image

Published by: 

2 Followers

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.