flutter-tutorial

Flutter Text

In Flutter, a Text is a widget that allows us to show a string of text on a single line in our app. We can break the string across multiple lines or display it all on the same line, depending on the layout limitations. If we don’t give the text widget any styling, it will default to the closest DefaultTextStyle class style. There is no specific style for this class. In this post, we’ll look at how to style a Text widget and how to use it in our application.

Here’s a short example to help you understand how to use this widget. The title of our project appears in the application bar, and a message appears in the application body in this example.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyTextPage());
  }
}
class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Learn Code Zone")),
      body: Center(child: Text("Text Widget Example")),
    );
  }
}

We utilised a MaterialApp widget in the above code to call the home screen using the MyTextPage() class. This class contains the scaffold widget, which has appBar and body, where the title and body are displayed using the Text widget. It’s a simple Text widget situation in which we pass the string we want to display on our page.

When we execute this application in an emulator or on a device, we should see something like this:

The following are the attributes of the Text widget that we used in our app:

  • TextAlign: This property is used to describe how our text is horizontally positioned. It also has control over the text’s position.
  • TextDirection: It determines how textAlign values influence the layout of our text. We usually write text from left to right, but this parameter allows us to change that.
  • Overflow: When the text will not fit in the allocated space, the word “overflow” is used. We’ve provided more text than the given space allows.
  • TextScaleFactor: This value is used to scale the text that the Text widget displays. If we set the text scale factor to 1.5, our text will be 50 percent larger than the font size we specified.
  • SoftWrap: When there isn’t enough room, SoftWrap is utilised to determine whether or not to reveal all text widget content. If this is the case, all content will be displayed. Otherwise, not all content will be displayed.
  • MaxLines: This property determines the number of lines that can be displayed in the text widget.

Attributes

  • foreground: It establishes the paint as the text’s foreground.
  • background: It specifies the colour to be used as the text’s backdrop.
  • fontWeight: The thickness of the text is determined by fontWeight.
  • fontSize: This property determines the text’s size.
  • fontFamily: It’s used to specify the font’s typeface. To do so, we’ll need to download a typeface file and save it to the assets/font folder in our project. Finally, set up the pubspec.yaml file so that it can be used in the project.
  • fontStyle: This property is used to make the font bold or italic.
  • Color: It is used to determine the text’s colour.
  • letterSpacing: This property is used to determine the distance between text characters.
  • wordSpacing: This property specifies the distance between two text words.
  • shadows: It’s a technique for painting beneath the text.
  • decoration: Using the three options, we use this to embellish text: decoration, decoration, decoration Style, colour, and decorating The location is determined by the decoration, and the decoration dictates the location. The colour is specified by colour, while the shape is determined by decorationStyle.

Let’s see some of these in use.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyTextPage());
  }
}

class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Learn Code Zone")),
      body: Center(
          child: Text(
        "Hello World! This is a Text Widget.",
        style: TextStyle(
            fontSize: 35,
            color: Colors.purple,
            fontWeight: FontWeight.w700,
            fontStyle: FontStyle.italic,
            letterSpacing: 8,
            wordSpacing: 20,
            backgroundColor: Colors.yellow,
            shadows: [
              Shadow(
                  color: Colors.blueAccent,
                  offset: Offset(2, 1),
                  blurRadius: 10)
            ]),
      )),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *