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

Author Image

Zia

3 Followers

Aug 31, 2024
-
0 sec read
753
0
0
0

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

Author Image

Published by: 

3 Followers

Zia

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.

More From: 
Zia
indexer in c#
Indexer in C# Programming

In a C program, indexers allow instances of a class or struct ...
Author Image
Zia
Apr 24, 2024
980
0
0
0
abstract classes and abstract methods in c#
Abstract Class and Abstract Methods...

C allows designing a class specifically to be used as a base ...
Author Image
Zia
Apr 27, 2024
908
0
0
0
Formatting text in HTML
Formatting Text Using Tags in...

The content format determines how the content will appear in the browser. ...
Author Image
Zia
Jun 14, 2024
1.3k
0
0
0
Machine Learning
What is Machine Learning: A...

Machine learning has emerged as a groundbreaking technology transforming theway we engage ...
Author Image
Zia
Feb 20, 2024
936
0
0
0
Recomended
Feature Driven Development (FDD)
What is Feature Driven Development...

FDD is a type of software developmentmethodology, ideal for use by big ...
Author Image
Zia
May 30, 2024
870
0
0
0
dart programming language
What is Dart Programming Language

Dart is an opensource programming language developed by Google. Although it can ...
Author Image
Zia
Jun 3, 2024
1.5k
0
0
0
The Silver Key
The Silver Key

Once a rich traveler was traveling during the night. At last, he ...
Author Image
Story Link
Jul 22, 2024
942
0
1
0
The Hidden Door A School Adventure
The Hidden Door - A...

It all started on a rainy afternoon when a group of five ...
Author Image
Story Link
Feb 16, 2025
546
0
0
0