Flutter Text with example

Hello flutter Dev’s, this blog will let us know the use of Flutter Text with example. Text widget is of course a simple and basic widget. As we have seen checkbox as a basic widget. Similarly, Text widget is the most common and frequently used widget. Text widget has two type. Firstly, Text it self and secondly, Rich

The main important use of Text widget is to display one line string. This single string can change into multiple ways on the basis of layout constraints.

It contains DefaultTextStyle, if we don’t specify any styling to the text.

Constructor:

Text(

String data, {

Key key,

TextStyle style,

StrutStyle strutStyle,

TextAlign textAlign,

TextDirection textDirection,

Locale locale,

bool softWrap,

TextOverflow overflow,

double textScaleFactor,

int maxLines,

String semanticsLabel,

TextWidthBasis textWidthBasis,

TextHeightBehavior textHeightBehavior

}

)

Rich Text widget

Constructor:

Text.rich(

InlineSpan textSpan,

{

Key key,

TextStyle style,

StrutStyle strutStyle,

TextAlign textAlign,

TextDirection textDirection,

Locale locale,

bool softWrap,

TextOverflow overflow,

double textScaleFactor,

int maxLines,

String semanticsLabel,

TextWidthBasis textWidthBasis,

TextHeightBehavior textHeightBehavior

}

)

Properties:

data: Simply it’s the data that has to be displayed on screen.

locale: It is a rarely used property. It is used the selected string has same Unicode character but need to display in different way.

maxLines: This property is optional. If the string needs to extend in multiple lines. if it is necessary wrapping is also used with this property. If we have multiple lines and then also the string exceeds the lines, then the remaining string will be truncated according to overflow.

overflow: Similarly, the overflow property determines how to fit the string in visible or available space on screen.

semanticsLabel: If you need to display some notations or symbols instead of string, then this property is used. For example, if the text is “$$” then show “Dollar”.

softWrap: This property determines how the string should be displayed when the string has exceeded the size limit.

strutStyle: Sturt defines a style. This style determines the struct, which sets the minimum vertical layout metrics.

style: This property sets additional stylings to the string. This additional styling includes the foreground and background color, font size, font weight, letter and word spacing, locale, shadows, etc.

textAlign: It determines the alignment of text horizontally.

textDirection: This property determines the text direction. Generally, text direction is left to right. If we want to change this direction, we can change with the help of this property.

textHeightBehavior: It determines how to display text within the paragraph between the first line and the descent of the last line.

textScaleFactor: It defines the scaling to the text widget. In short, if the text scale factor is 1.5, then the text will be 50 percent larger than the specified font size.

textSpan: This property displays the text as inlinespan.

textWidthBasis: It controls how the text width is defined

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Flutter Demo’,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: ‘Flutter Text Demo’),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
             ‘Welcome to techchia Text Widget Demo’,
              style: TextStyle(fontSize: 30,
                color: Colors.black54,
                backgroundColor: Colors.blue,
                fontStyle: FontStyle.italic,),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("Flutter Text Demo")
        ),
        body: Container(
            child: Center(
              child: RichText(
                text: TextSpan(
                    style: TextStyle(color: Colors.black, fontSize: 20),
                    children: <TextSpan>[
                      TextSpan(text: ' Sign up',
                          style: TextStyle(color: Colors.blueAccent, fontSize: 20),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                            print('Sign Up');
                            }
                      ),
                      TextSpan(text: ' OR',
                      ),
                      TextSpan(text: ' Join Now',
                          style: TextStyle(color: Colors.blueAccent, fontSize: 20),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              print('Join Now');
                            }
                      )
                    ]
                ),
              ),
            )
        )
    );
  }
}
local_offerevent_note February 3, 2021

account_box Aishwarya

Leave a Reply

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