Expandable Widget in Flutter

The expandable widgets do not have a fixed size, they expand on the screen according to the available areas on the screen. Due to size constraints, certain widgets can throw rendering errors, so widgets are made expandable. The one use of expandable widgets is cards that include images, texts, and to further read the text we can click “Read More” or “Read Less” before getting redirected to the next page, we want to know what’s inside it. In this article, we will see the way we can create these types of expandable widgets.

Add the dependency

In Flutter, to make this activity easy “readmore” package is created which we need to add in the pubspec.yaml file. Then, we need to configure it by running pub get in the terminal of working IDE.

Dart

dependencies:
  readmore: ^2.1.0

Import the dependency

We need to import the readmore dependency in main.dart file,

Dart

import 'package:readmore/readmore.dart';

Implementation

The properties of ReadMoreText() widget are

Dart

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,
})

To create expandable widgets that include text expanding we use ReadMoreText() widget. In the below example, we passed text, set trimLines = 2 which means we are trimming the last two lines of text. We are adding style to the text and setting the trimCollapsedText to “show more” which will be shown when the widget is collapsed and trimExpandedText to “show less” which will be visible when the widget is expanded.

Dart

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),
                      ),

Output:

Complete Example

Dart

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),
                      ),
                    );
                  })),
        ));
  }
}

Output: