Skip to main content

Text Widget In Depth - Flutter


What's the most used widget in flutter?

Text Widget.

We use Text Widget in flutter to render text to our application. Text widget is very commonly used as an independent widget or as a sub widget in some other widget. E.g. as a child to a RaisedButton.



Here is a small code which uses almost all the properties you might use when developing flutter application for Text Widget and also shows how you can use Text.rich() for multiple formatting of the text.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          // Alignment in vertical direction for columns (in horizontal direction for Rows).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10),
              width: MediaQuery.of(context).size.width,
              child: Text(
                'Hello World',
                // Center Aligned with respect to parent.
                textAlign: TextAlign.center,
                //Font size 50% larger than specified font size
                textScaleFactor: 1.5,
                // Used for Font Styling
                style: TextStyle(
                  // Specify Font Size
                  fontSize: 20,
                  // Specify Font Color
                  color: Colors.blue,
                  // Specify thickness of font
                  fontWeight: FontWeight.w800,
                  // Specify space between each letter
                  letterSpacing: 10,
                  // Specify space between every word
                  wordSpacing: 10,
                  // Specify background color of text
                  backgroundColor: Colors.black,
                  // Specify various decorations such as lineThrough, overline, underline or Combined.
                  decoration: TextDecoration.combine([
                    // Line through the text.
                    TextDecoration.lineThrough,
                    // Line Under the text.
                    TextDecoration.underline,
                    // Line at the top of the text.
                    TextDecoration.overline
                  ]),
                ),
              ),
            ),
            // Takes in TextSpan, and children of TextSpan. Other
            // Properties similar to Text Widget.
            Text.rich(
              TextSpan(
                text: 'Hello ',
                style: TextStyle(
                  fontSize: 30,
                ),
                children: [
                  TextSpan(
                    text: 'stacklearn.org',
                    style: TextStyle(
                      fontSize: 30,
                      fontStyle: FontStyle.italic,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

We use Text Widget to render text in flutter with all the text styled in a single style. If you want multiple styling then for that we use Text.rich() which contains a TextSpan widget and a children property where we can add more TextSpan widgets.

Some Common Property when we use Text Widget are:

  • style : takes in a TextStyle widget (see also google_fonts)
    • fontSize : used to size our text.
    • fontWeight : gives thickness to our text
    • color : used to specify color of the text
  • textAlign : used to align our text with respect to its parent.

If you enjoyed this blog, subscribe to it for more updates! 

Labels:

Popular posts from this blog

Stateless Vs Stateful Widgets

Whats what and what are they really? Stateless Widgets and Stateful Widget explained. In a line, if your widget change appearance use stateful widget and if it doesn't use stateless widget that's all. We know that flutter is all about widgets and in flutter there are 2 types of widgets. Stateless Widget Stateful Widget Stateless Widget A stateless widget never changes. For example Icon, IconButton, Text and so on. Once they are built they remain the same during the lifetime of the application. There are various places where you might want to use Stateless widget such as your app Title, Images, and so on. Stateful Widget A stateful widget is something which has a state so basically that widget needs to be rebuilt whenever some event occurs. A good example would be a toggle button. Whenever you tap on the toggle button its state changes to either on or off. The appearance of the button changes and this happens because the stateful widget asks the build method to rebuild the widge...
Read more

All about GridView - Flutter

GridView in Flutter - Learn About GridView In Depth When we need widgets stacked like in a grid, we use GridView. There are two main ways in which you can use a GridView.  First Method, Using GridView.count() GridView.count requires 2 things, the first is cross axis count which tells how many boxes or grids will be there in one row. The second is children property which takes in  a list of widget. Second Method, Using GridView.builder() GridView.builder() takes in various parameters, one is itemCount which takes in number of items we want to display. Other required property is gridDelegate controls the layout of the tiles in gridView and the last property which we will talk about is itemBuilder which is similar to the one used in  List View . itemBuilder takes in a function with two parameters, context and index. context tells where to place the child on screen or basically which context to place the child in and index is a number which runs through 0 to itemCount - 1. If...
Read more

A simple hello world app in flutter

In Flutter we primarily use widgets. There are all sorts of widgets to look out for and each providing a specific functionality. Flutter allows you to implement various things at ease with the help of widgets. A simple hello world app in flutter looks like this import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @ override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @ override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @ override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( 'Hello,World!' ), ), ); } } MaterialApp Widget allows us to use the material widgets within the application where as scaffold provides additional functionalities such as ad...
Read more