Text & RichText Widget in Flutter

In Flutter, Text Widget is used for to Show label (text). We can also use Tap Event on Text Widget. We can also use FlatButton instead.

It has some basic properties like

  • style: to Styling Text like Colors, Size, boldness, italic font
  • maxLines: for multiple lines uses in Text Widget
  • overflow: to wrap Text
  • textAlign: text align like Center, Left, Right
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("Text Demo")),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          Text("Simple Text"),
          SizedBox(height: 10),
          Text("Colored Text", style: TextStyle(color: Colors.green)),
          SizedBox(height: 10),
          Text("Bold Text with Color",
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
          SizedBox(height: 10),
          Text("Bold Text with Color & TextSize",
              style: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0)),
        ])),
      ),
    );
  }
}

Property Explanations

  • style : to Style the Text like Color, fontSize, boldness
  • fontSize : it should be double value
  • color: Change color of Text

Used Widget Explanations

  • SizedBox: to give space vertically or horizontally. It has height and width property
  • Text: for Labelling

Output of this program is

Rich Text

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("TextField Demo")),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          RichText(
            text: TextSpan(
              text: 'Hello ',
              style: TextStyle(
                  fontWeight: FontWeight.normal,
                  color: Colors.black,
                  fontSize: 20.0),
              children: <TextSpan>[
                TextSpan(
                    text: 'bold',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.red,
                    )),
                TextSpan(text: ' world!'),
              ],
            ),
          )
        ])),
      ),
    );
  }
}
Share

You may also like...

Leave a Reply

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