2

I'm getting data from the API, text length is different from every post, so I want to make a responsible Text widget, which is want to behave like this image i try to create like this I tried this solution but here if I click show more text every Text widget size is increase(see this image) because I declare descTextShowFlag this bool variable as global, and are there any way to increase the text widget height dynamically because here I want to give the maxline property as default, this maxline property also want to increase dynamically, If there any good way to that please tell me

   import 'package:auto_size_text/auto_size_text.dart';
    import 'package:exa/Model/ModelNewsFeed.dart';
    import 'package:flutter/material.dart';

class Examplewidget extends StatefulWidget {
  NewsFeeds newsFeeds;

  Examplewidget(this.newsFeeds);

  @override
  _ExamplewidgetState createState() => _ExamplewidgetState();
}

class _ExamplewidgetState extends State<Examplewidget> {

  String data = "We’ll see how image picker works in flutter for android and iOS. Ans: Image picker is a plugin which is used to get images from gallery or camera in the app. ... This is called Privacy - Photo Library Usage Description in the visual editor(Xcode or Android Studio).";
  bool descTextShowFlag = false;

  @override
  Widget build(BuildContext context) {

    int listsize = widget.newsFeeds.data.data.length;

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(14.0),
        child: ListView.builder(
            itemCount: listsize,
            itemBuilder: (context, index) {
              String textStatus =
                  "${widget.newsFeeds.data.data[index].postContent}";

              return new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text( "$textStatus",
                      style: TextStyle(fontSize: 16.0),
                      maxLines: descTextShowFlag ? 8 : 2,
                      textAlign: TextAlign.start),
                  InkWell(
                    onTap: () {
                                  setState(() {
                                    descTextShowFlag = !descTextShowFlag;
                                  });
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        descTextShowFlag
                            ? Text(
                          "Show Less",
                          style: TextStyle(
                              fontSize: 16.0,
                              color: Colors.blue),
                        )
                            : Text("Show More",
                            style: TextStyle(color: Colors.blue))
                      ],
                    ),
                  ),
                ],
              );
            }),
      ),
    );
  }
}
0

2 Answers 2

5

You can use RichText which will help you build your widget inline

this is a working example

class _MyHomePageState extends State<MyHomePage> {
  var myText =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum ";
  var showAll = true;
final length = 150;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text.rich(TextSpan(
        children: <InlineSpan>[
          TextSpan(
              text: myText.length > length && !showAll
                  ? myText.substring(0,length) + "..."
                  : myText),
          myText.length > length
              ? WidgetSpan(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        showAll = !showAll;
                      });
                    },
                    child: Text(
                      showAll ? 'read less' : 'read more!',
                      style: TextStyle(color: Colors.blue),
                    ),
                  ),
                )
              : TextSpan(),
        ],
      )),
    );
  }
}
1
  • What do you mean by not working? Do you have errors? Mar 18, 2020 at 16:43
0

Finally I found This Solution, This is Working Fine My expected output

import 'package:exa/Model/ModelNewsFeed.dart';
import 'package:flutter/material.dart';


class NewsfeedPost extends StatefulWidget {

  NewsFeeds newsFeeds;  // This is my model class for the API Response
  NewsfeedPost(this.newsFeeds);

  @override
  _NewsfeedPostState createState() => _NewsfeedPostState();
}

class _NewsfeedPostState extends State<NewsfeedPost> {

  String imageLink = "https://picsum.photos/250?image=9";

  bool descTextShowFlag = false; // defaultly every post has small texts ()

  @override
  Widget build(BuildContext context) {
    int listsize = widget.newsFeeds.data.data.length;

    return Scaffold(
      body: Padding(
        padding:  EdgeInsets.only(right: 4,left: 4,top: 4,bottom: 4),
        child: ListView.builder(
            itemCount: listsize,
            itemBuilder: (context, index) {
              String textStatus = "${widget.newsFeeds.data.data[index].postContent}";

              String fname='${widget.newsFeeds.data.data[index].postOwner.firstName}';
              String lname='${widget.newsFeeds.data.data[index].postOwner.lastName}';
              String postdate='${widget.newsFeeds.data.data[index].updatedAt}';

              int textlength = textStatus.length;

              return Card(
                child: SingleChildScrollView(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        height:60.0 ,
                        color: Colors.white10,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.only(left: 5.0,right: 5.0),
                                  child: Container(
                                    height: 50.0,
                                    width: 50.0, //MediaQuery.of(context).size.width,
                                    child: new CircleAvatar(
                                      radius: 50.0,
                                      backgroundColor: Colors.transparent,
                                      backgroundImage: NetworkImage(imageLink),
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:EdgeInsets.only(top: 5.0,bottom: 5.0),
                                  child: Column(
                                    children: <Widget>[
                                      Column(
                                        children: <Widget>[
                                          Row(
                                            mainAxisSize: MainAxisSize.min,
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children: <Widget>[
                                              Text('$fname'+' $lname',style: TextStyle(fontSize: 20.0),textAlign: TextAlign.start,),
                                            ],
                                          ),
                                          Row(
                                            mainAxisSize: MainAxisSize.min,
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children: <Widget>[
                                              Text('$postdate'),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),

                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Icon(Icons.more_horiz),
                            )
                          ],
                        ),
                      ),
                      Divider(),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("$textStatus",
                            style: TextStyle(fontSize: 16.0),
                            maxLines: descTextShowFlag
                                ? MediaQuery.of(context).size.height.toInt()
                                : 5,
                            textAlign: TextAlign.start),
                      ),
                      InkWell(
                        onTap: () {
                          setState(() {
                            descTextShowFlag = !descTextShowFlag;
                          });
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            //   descTextShowFlag
                            textlength <= 200
                                ? Text(
                              "",
                              style: TextStyle(
                                  fontSize: 16.0, color: Colors.blue),
                            )
                                : descTextShowFlag
                                ? Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Show Less",
                                  style: TextStyle(color: Colors.blue)),
                            )
                                : Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Show More",
                                  style: TextStyle(color: Colors.blue)),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }),
      ),
    );
  }
}
1
  • This not a good solution since it will not display text and more.. button at same line and will leave an empty space between your text and the button Mar 19, 2020 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.