Flutterexperts

Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload

Hello friends, I will talk about my new blog on ReadMore in flutter using the read_more_package. We will also implement a demo of ReadMore, and describes its properties, and how to use them in your flutter applications. So let’s get started.

Readmore | Flutter Package
example/lib/example.dart import ‘package:readmore/readmore.dart’; import ‘package:flutter/material.dart’; void main() {…pub.dev

---

Table of Contents :

Read More

Code Implementation

Code File

Conclusion

---

ReadMore :

Use the Read More plugin when we have to show two-three lines of the entire paragraph, the rest of the text is hidden. To create such a view, we use the properties of the Read More plugin and the user can give two texts anything. Which can be clicked to show and less the text of the paragraph.

The following are the basic properties of the Read More.

• style — Use the style properties to change the text size color and style etc.
• trimLines — The trimlines property is used to show some two-three lines of paragraph text.
• trimCollaspsedText — The trimCollaspsedText property is used to show paragraph text, in which the user can give some text according to it which is clickable.
• trimExpandedText — The trimExpandedText property is used to show paragraph text, in which the user can give some text according to it which is clickable.
• trimMode — Using the trimMode property we can change the mode of paragraph text to line length etc. Length mode shows the entire text and line mode shows some line.
• colorClickableText — The colorClickable Text property is used to change the color of the trimCollaspsedText and trimExpandedText clickable text. The user can change the color of the text according to it.

Demo Module :

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:   
readmore: ^1.0.1

Step 2: import the package :

import 'package:readmore/readmore.dart';

Step 3: Run flutter package get

How to implement code in dart file :

Create a new dart file called read_more_demo.dart inside the libfolder.

First of all, we will create a list readmoremodel named and define it in initState() method.

List <ReadMoreModel>readMoreModel;
@override
void initState() {
  readMoreModel=Constants.getReadMoreModel();
  super.initState();
}

Now we will create a container in the body and add the ListView.Builder() inside it and define the Readmore item list.

Container(
  height:DeviceSize.height(context),
  width:DeviceSize.width(context),
  margin:EdgeInsets.only(left:10,right:10,top:10),
  child:ListView.builder(
    itemCount:readMoreModel.length,
    scrollDirection:Axis.vertical,
    itemBuilder:(BuildContext context, int index) {
      return _buildReadMoreModelList(readMoreModel[index],index);
    },
  ),
),

Now we will create a container in the body and add the ListView.Builder() inside it and define the Readmore item list.

In this widget, we will create a container and take the ListView.Builder() widget inside it and define the ReadMoreText() plugin and show the list which has some text paragraphs when the user presses the Readmore and less text then the text opens downwards

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_read_more_demo/Constants/Constants.dart';
import 'package:flutter_read_more_demo/modal/read_more_model.dart';
import 'package:flutter_read_more_demo/themes/device_size.dart';
import 'package:readmore/readmore.dart';

class ReadMoreDemo extends StatefulWidget {
  @override
  _ReadMoreDemoState createState() => _ReadMoreDemoState();
}

class _ReadMoreDemoState extends State<ReadMoreDemo> {
  List<ReadMoreModel> readMoreModel;

  @override
  void initState() {
    readMoreModel = Constants.getReadMoreModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Read More Demo'),
        centerTitle: true,
      ),
      body: Container(
        height: DeviceSize.height(context),
        width: DeviceSize.width(context),
        margin: EdgeInsets.only(left: 10, right: 10, top: 10),
        child: ListView.builder(
          itemCount: readMoreModel.length,
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return _buildReadMoreModelList(readMoreModel[index], index);
          },
        ),
      ),
    );
  }

  Widget _buildReadMoreModelList(ReadMoreModel items, int index) {
    return Container(
      // height:DeviceSize.height(context),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: ReadMoreText(
            items.title,
            trimLines: 2,
            colorClickableText: Colors.pink,
            trimMode: TrimMode.Line,
            trimCollapsedText: '..Read More',
            style: TextStyle(fontSize: 13),
            trimExpandedText: ' Less',
          ),
        ),
        /* Divider(
          color: const Color(0xFF167F67),
        ),,*/
      ),
    );
  }
}

Conclusion :

In the article, I have explained the basic structure of Read More in a flutter; you can modify this code according to your choice. This was a small introduction to Read More on user interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Read More in your flutter project. We will show you the Read More is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.