Flutter Text Widget

Flutter Text widget allows you to display text in your Flutter application.

create an application:

In this application we use Scaffold widget wrapped with MaterialApp widget because MaterialApp is a predefined class in a flutter. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK like Text widget, DropDownButton widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, Padding widget, ThemeData widget, etc. are the widgets that can be accessed using MaterialApp class. There are many more widgets that are accessed using MaterialApp class. Using this widget, we can make an attractive application in Flutter.

Now here main method is an entry point from where your application start.

A widget is either stateful or stateless.

If a widget can change—when a user interacts with it, for example —> it’s stateful.

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

A widget’s state is stored in a State object, separating the widget’s state from its appearance. The state consists of values that can change, like a slider’s current value or whether a checkbox is checked. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

So we are using StatelessWidget because we want to used Text widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyWidgetTutorial(),
    );
  }
}

class MyWidgetTutorial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Demo"),
      ),
      //we can call a custom method that return a widget
      body: getTextWidget(context),
    );
  }
}

//this is a method that return a widget
Widget getTextWidget(BuildContext context) {
  return Container(
    //this is used  to set background color of container
    color: Colors.red,
    //this is used to provide parent width of device.
    width: MediaQuery.of(context).size.width,
    //this is used to provide height of container
    height: 100,
    //using this we can add another widget
    child: Center(
      //using child we can also add another widget 
      child: Text(
        "Hello Text Widget Hello Text Widget Hello Text Widget 
        Hello Text Widget Hello Text Widget Hello Text Widget",
        //font size given by the user setting that is not fix
        textScaleFactor: 2,
        maxLines: 1,
        //it uses ... when text length is overflow
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            //font size given by the programmer that is fix
            fontSize: 15,
            backgroundColor: Colors.black,
            //text color define here
            color: Colors.white,
            fontStyle: FontStyle.italic,
            fontFamily: "sans serif",
            fontWeight: FontWeight.bold),
            //align the text with in the container
            textAlign: TextAlign.center,
      ),
    ),
  );
}

Example of Text Widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "My App",
    home: TextWidget(),
  ));
}

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Text Widget Tutorial",
          style: TextStyle(color: Colors.black),
        ),
        leading:  Icon(
          Icons.text_fields,
          size: 24,
          color: Colors.black,
        ),
        backgroundColor: Colors.yellow,
      ),
      body: Container(
        color: Colors.yellowAccent,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.all(5),
        child: Text(
          "In this example we can learn Text widget in 
          Flutter like how to use and styling etc.",
          style: TextStyle(
              fontSize: 20,
              color: Colors.indigo,
              fontStyle: FontStyle.italic,
              fontFamily: "serif",
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dashed,
              decorationThickness: 2,
              decorationColor: Colors.red,
              letterSpacing: 3,
              wordSpacing: 4),
          softWrap: true,
          textAlign: TextAlign.left,
          textDirection: TextDirection.ltr,
          textWidthBasis: TextWidthBasis.longestLine,
          maxLines: 4,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }
}