Flutter: widget de texto enriquecido

El widget RichText se usa para mostrar texto que usa varios estilos diferentes. El texto mostrado se describe usando un árbol de objetos TextSpan , cada uno de los cuales tiene su propio estilo asociado que se usa para ese subárbol . Dependiendo de las restricciones de diseño, el texto puede dividirse en varias líneas o puede mostrarse todo en la misma línea.

Constructores:

Sintaxis:

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,

Propiedades:

• niños: Los widgets debajo de este widget en el árbol.
• hashCode: El código hash para este objeto.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• texto: el texto que se mostrará en este widget.
• textAlign: cómo se debe alinear el texto horizontalmente.
• local: esta propiedad toma la clase Locale como objeto. Controla la fuente utilizada para el texto dependiendo del idioma utilizado.
• maxLines: La propiedad maxLines toma un valor int como objeto. Controla el número máximo de líneas que puede haber para que el texto se expanda y ajuste.
• desbordamiento: la enumeración TextOverflow es el objeto dado a su clase, controla el texto en caso de desbordamiento.
• softWrap: Esta propiedad toma un valor booleano como objeto. Si se establece en falso, los golfos en el texto se hacen más amplios.
• textDirection: esta propiedad toma la clase TextDirection como el objeto para decidir la dirección del texto. Puede ser de izquierda a derecha o de derecha a izquierda.
• textHightBehaviour: la clase TextHeightBehavior es el objeto dado a esta propiedad. Controla cómo se resaltará el texto.
• textScaleFactor: Esta propiedad se toma en un valor doble como el objeto para determinar el tamaño relativo de la fuente.
• textWidthBasis: la enumeración TextWidthBasis es el objeto de esta propiedad. Controla el ancho de una sola línea de texto que se mide.

Ejemplo:

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePAGE extends StatefulWidget {
  const MyHomePAGE({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
 
class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: RichText(
        // Controls visual overflow
        overflow: TextOverflow.clip,
 
        // Controls how the text should be aligned horizontally
        textAlign: TextAlign.end,
 
        // Control the text direction
        textDirection: TextDirection.rtl,
 
        // Whether the text should break at soft line breaks
        softWrap: true,
 
        // Maximum number of lines for the text to span
        maxLines: 1,
 
        // The number of font pixels for each logical pixel
        textScaleFactor: 1,
        text: TextSpan(
          text: 'Hello ',
          style: DefaultTextStyle.of(context).style,
          children: const <TextSpan>[
            TextSpan(
                text: 'Geeks', style: TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      )),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
 
class MyClip extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return const Rect.fromLTWH(0, 0, 100, 100);
  }
 
  @override
  bool shouldReclip(oldClipper) {
    return false;
  }
}

Producción:

Explicación de salida:

1. Cree un widget sin estado como el widget principal de la aplicación.
2. Defina una clase que represente la pantalla de inicio usando un widget con estado.
3. Defina la barra de aplicaciones dentro de un widget de andamio .
4. Coloque el widget Richtext en el centro.