Flutter – RichText Widget

The RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree. Depending on the layout constraints the text might break across multiple lines or might all be displayed on the same line.

Constructors:

Syntax:
RichText(
{Key key,
@required InlineSpan text,
TextAlign textAlign: TextAlign.start, 
TextDirection textDirection, 
bool softWrap: true, 
TextOverflow overflow: 
TextOverflow.clip, 
double textScaleFactor: 1.0, 
int maxLines, 
Locale locale, 
StrutStyle strutStyle, 
TextWidthBasis textWidthBasis: TextWidthBasis.parent, 
TextHeightBehavior textHeightBehavior,

Properties:

  • children: The widgets below this widget in the tree.
  • hashCode: The hash code for this object.
  • key: Controls how one widget replaces another widget in the tree.
  • runtimeType: A representation of the runtime type of the object.
  • text: The text to display in this widget.
  • textAlign: How the text should be aligned horizontally.
  • local: This property takes in Locale class as the object. It controls the font used for the text depending on the language used.
  • maxLines: The maxLines property takes in an int value as the object. It controls the maximum number of the line that can be there for the text to expand and wrap.
  • overflow: TextOverflow enum is the object given to its class it controls the text in case of overflow.
  • softWrap: This property takes in a boolean value as the object. If it is set to false the gulphs in the text become wider.
  • textDirection: This property takes in TextDirection class as the object to decide the direction of the text. It can be either from left-to-right or right-to-left.
  • textHightBehaviour: TextHeightBehavior class is the object given to this property. It controls how the text will be highlighted.
  • textScaleFactor: This property taken in a double value as the object to determine the relative size of the font.
  • textWidthBasis: TextWidthBasis enum is the object of this property. It controls the width of a single line of text is being measured.

Example:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
 
class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Hello ',
              style: DefaultTextStyle.of(context).style,
              children: <TextSpan>[
                TextSpan(text: 'Geeks', style: TextStyle(fontWeight: FontWeight.bold)),
              ],
            ),
          )
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
 
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
 
  bool shouldReclip(oldClipper) {
    return false;
  }
}

chevron_right


Output:

Richtext in flutter

Explanation:

  1. First create a stateless widget as the main widget of the app.
  2. Second define a class representing the home screen using a stateful widget.
  3. Third define the appbar inside a scaffold widget.
  4. Finally, place the Richtext widget in the center.



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.