Question 161661 in Flutter Question posted in
The official Flutter documentation can be found here.

Can Flutter show long text as overflow with dots in a SliverList text widget?

i have facing this issue

but i want text like this

I am working on a Flutter app and I am trying to display a long text in a SliverList widget. I want to show the overflow text as dots so that the user knows that there is more text to read. I have tried using the Text widget with the maxLines and overflow properties set, but it doesn’t seem to be working in the SliverList. The text is still displayed without any truncation or dots. Can anyone help me figure out how to show the overflow text as dots in a SliverList widget in Flutter?

SliverList(
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Container(
                    padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"),
                          radius: screenWidth*0.08,
                        ),
                        SizedBox(width: screenWidth*0.05,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Adam John",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 18.0,
                              ),
                            ),
                            SizedBox(height: 5.0),
                            Container(
                              padding: const EdgeInsets.all(1),
                              child: Text(
                                "hello! my name is adam john and i'm your new tariner",
                                maxLines: 1,
                                overflow: TextOverflow.fade,
                                style: TextStyle(
                                  color: AppColors().darKShadowColor,
                                  fontSize: 16.0,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Text(
                      "10:30pm",
                          style: TextStyle(
                            color:  AppColors().darKShadowColor,
                            fontSize: 16.0,
                          ),
                        ),
                      ],
                    ),
                  );
                },
                childCount: 3,
              ),
            ),
Tags:

5

Answers


  1. 0

    Your Text is inside a Row, so it has an unbounded width.

    Wrap your Text inside an Expanded and also set the overflow to:

    overflow: TextOverflow.ellipsis,
    Login or Signup to reply.
  2. 0

    I’m Try to Solve Your Problem:

    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"),
                  radius: screenWidth*0.08,
                ),
                SizedBox(width: screenWidth*0.05,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Adam John",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                      SizedBox(height: 5.0),
                      Container(
                        padding: const EdgeInsets.all(1),
                        child: Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis, // set overflow to ellipsis
                          style: TextStyle(
                            color: AppColors().darKShadowColor,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Text(
                  "10:30pm",
                  style: TextStyle(
                    color:  AppColors().darKShadowColor,
                    fontSize: 16.0,
                  ),
                ),
              ],
            ),
          );
        },
        childCount: 3,
      ),
    ),
    Login or Signup to reply.
  3. 0

    Update your code like this

     Container(
                        width: 200,//you need to set width to work overflow 
                        padding: const EdgeInsets.all(1),
                        child: const Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                        )),
    Login or Signup to reply.
  4. 0

    Simply set the property of overflow inside your text widget to

    overflow: TextOverflow.ellipsis,

    This should do the work
    so this is how your container will look like

     Container(
                        width: 200,//you need to set width to work overflow 
                        padding: const EdgeInsets.all(1),
                        child: const Text(
                          "hello! my name is adam john and i'm your new tariner",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                        )),
    Login or Signup to reply.
  5. 0 
    Row(
      children: [
        Expanded(
          child: Text(
            "Your Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search