Widget expandible en Flutter

Los widgets expandibles no tienen un tamaño fijo, se expanden en la pantalla según las áreas disponibles en la pantalla. Debido a las limitaciones de tamaño, ciertos widgets pueden arrojar errores de representación, por lo que los widgets se hacen expandibles. El único uso de los widgets expandibles son las tarjetas que incluyen imágenes, textos y, para leer más el texto, podemos hacer clic en «Leer más» o «Leer menos» antes de ser redirigido a la página siguiente, queremos saber qué hay dentro. En este artículo, veremos la forma en que podemos crear este tipo de widgets expandibles.

Agregar la dependencia

En Flutter, para facilitar esta actividad, se crea el paquete «readmore» que debemos agregar en el archivo pubspec.yaml . Luego, debemos configurarlo ejecutando pub get en la terminal del IDE en funcionamiento.

dependencies:
  readmore: ^2.1.0

Importar la dependencia

Necesitamos importar la dependencia readmore en el archivo main.dart ,

import 'package:readmore/readmore.dart';

Implementación

Las propiedades del widget ReadMoreText() son

ReadMoreText ReadMoreText(
  String data, {
  Key? key,
  String trimExpandedText = 'show less',
  String trimCollapsedText = 'read more',
  Color? colorClickableText,
  int trimLength = 240,
  int trimLines = 2,
  TrimMode trimMode = TrimMode.Length,
  TextStyle? style,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  double? textScaleFactor,
  String? semanticsLabel,
  TextStyle? moreStyle,
  TextStyle? lessStyle,
  String delimiter = _kEllipsis + ' ',
  TextStyle? delimiterStyle,
  dynamic Function(bool)? callback,
})

Para crear widgets expandibles que incluyan expansión de texto, usamos el widget ReadMoreText(). En el siguiente ejemplo, pasamos texto, establecemos trimLines = 2, lo que significa que estamos recortando las últimas dos líneas de texto. Estamos agregando estilo al texto y configurando trimCollapsedText para «mostrar más», que se mostrará cuando el widget esté contraído, y trimExpandedText para «mostrar menos», que será visible cuando el widget esté expandido.

ReadMoreText(
             'GeeksForGeeks is the best tutorial website for programmers.
              If you are beginner or intermediate or expert programmer
              GeeksForGeeks is the best website for learning to code and
              learn different frameworks.',
              trimLines: 2,
              textScaleFactor: 1,
              colorClickableText: Colors.red,
              trimMode: TrimMode.Line,
              trimCollapsedText: 'Show more',
              trimExpandedText: 'Show less',
              style: TextStyle(color: Colors.black, fontSize: 18),
              moreStyle: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold,
                            color: Colors.red),
                      ),

Producción:

Ejemplo completo

import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Expandable Widgets',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("GeeksForGeeks"),
            centerTitle: true,
          ),
          body: Center(
              child: ListView.builder(
                  itemCount: 5,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ReadMoreText(
                        'GeeksForGeeks is the best tutorial website for programmers.
                         If you are beginner or intermediate or expert programmer
                         GeeksForGeeks is the best website for learning to code 
                         and learn different frameworks.',
                        trimLines: 2,
                        textScaleFactor: 1,
                        colorClickableText: Colors.red,
                        trimMode: TrimMode.Line,
                        trimCollapsedText: 'Show more',
                        trimExpandedText: 'Show less',
                        style: TextStyle(color: Colors.black, fontSize: 18),
                        moreStyle: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold,
                            color: Colors.red),
                      ),
                    );
                  })),
        ));
  }
}

Producción: