Flutter - Wrap text on overflow like insert ellipsis or fade

0 votes

I'm trying to create a line in which center text has a maximum size, and if the text content is too large, it fits in size.

I insert the TextOverflow.ellipsis property to shorten the text and inserting the triple points ... but it is not working.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

result:

enter image description here

expected:

enter image description here

Mar 1, 2023 in Android by Ashwini
• 5,430 points
1,293 views

1 answer to this question.

0 votes
Container(
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
  child: Row(
    children: <Widget>[
      CircleAvatar(
        backgroundColor: Color(0xFFF5F5F5),
        radius: 16.0,
      ),
      SizedBox(width: 24.0),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Text large enough to overflow',
              style: TextStyle(
                fontSize: 13.0,
                fontFamily: 'Roboto',
                color: Color(0xFF212121),
                fontWeight: FontWeight.bold,
              ),
              overflow: TextOverflow.fade,
              maxLines: 1,
            ),
            SizedBox(height: 8.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Bill',
                  style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
                Text(
                  '\$ -999.999.999,95',
                  style: TextStyle(
                    fontSize: 14.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF212121),
                  ),
                ),
              ],
            ),
            SizedBox(height: 4.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Limit',
                  style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
                Text(
                  'R\$ 900.000.000,95',
                  style: TextStyle(
                    fontSize: 14.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ],
  ),
);

In this solution, we use an Expanded widget to make the text take up as much space as possible. We set the overflow property of the Text widget to TextOverflow.fade to make the text fade out when it overflows. We also set the maxLines property to 1 to ensure that the text only takes up one line. We use SizedBox widgets with a specified height to create some space between the different elements. Finally, we use the mainAxisAlignment property of the Row widget to ensure that the different elements are aligned correctly.

answered Mar 1, 2023 by vishalini

Related Questions In Android

0 votes
1 answer

How to underline text in flutter

You can underline text in Flutter by ...READ MORE

answered Mar 10, 2023 in Android by vinayak
12,872 views
0 votes
1 answer

Flutter scrollable positioned list support rtl text direction?

To support RTL text direction in the ...READ MORE

answered Mar 18, 2023 in Android by vishalini
1,099 views
0 votes
1 answer

I am creating mobile application on flutter but facing error of tflite library

The error you're encountering means that there ...READ MORE

answered Mar 18, 2023 in Android by pooja
914 views
0 votes
1 answer

Flutter, run async function on stream.listen

You can make the listen callback an ...READ MORE

answered Mar 20, 2023 in Android by pooja
1,331 views
0 votes
1 answer

Create a rounded button / button with border-radius in Flutter

To create a rounded button with border-radius ...READ MORE

answered Mar 1, 2023 in Android by vishalini
31,162 views
0 votes
1 answer
0 votes
1 answer

Flutter Like Button Animation Not Working After Adding Method

It seems like the issue might be ...READ MORE

answered Apr 12, 2023 in Flutter by Tanishqa
• 1,170 points
851 views
0 votes
1 answer
0 votes
2 answers

How to change the application launcher icon on Flutter? Ask Question

how to change the app icon in ...READ MORE

answered Nov 29, 2023 in Android by anonymous
10,382 views
0 votes
1 answer

flutter remove back button on appbar

You can remove the back button from ...READ MORE

answered Mar 10, 2023 in Android by vinayak
11,798 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP