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

How to solve overflowed pixels in flutter

I have a Flutter app, and on one of the screens, I have a list of employees. The data for the employees is retrieved from an API. The issue I’m facing is that some of the employees have long names, causing the screen to overflow. How can I resolve this issue?

For example

On this screen, all components are resizing based on the screen’s width and height. However, I’m having trouble solving the issue of text overflow in long names.

Text('$isim $soyisim',
                          overflow: TextOverflow.fade,
                          maxLines: 1,
                          style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.w700,
                              fontSize: device.width * 0.05))
Tags:

2

Answers


  1. 0 
    YourCardWidget(
      child: Row(
        children: [
          Expanded(child: Text('$isim $soyisim', overflow: TextOverflow.fade, maxLines: 1, style: TextStyle( color: Colors.black, fontWeight: FontWeight.w700, fontSize: device.width * 0.05))) ,

          YourIconButton()
        ],
      ),
    )
    Login or Signup to reply.
  2. 0

    One Method is using a expanded or flexible widget

    Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Flexible(
                        flex: 5,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("data 1"),
                            Text("data 1"),
                            Text(
                              "Random long text data field which goes on an on an on an",
                            ),
                          ],
                        ),
                      ),
                      Flexible(
                        child: Container(
                          decoration: BoxDecoration(
                              color: Colors.green,
                              borderRadius: BorderRadius.circular(50)),
                          child: Icon(Icons.account_circle_sharp),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          }),
    );

    result: enter image description here

    Another way is using a Constraint Box widget:

    class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 13.0),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ConstrainedBox(
                        constraints:
                            BoxConstraints(maxWidth: size.width * 0.70),
                        child: const Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("data 1"),
                            Text("data 1"),
                            Text(
                              "Random long text data field which goes on an on an on an",
                            ),
                          ],
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(50)),
                        child: const Icon(Icons.account_circle_sharp),
                      )
                    ],
                  ),
                ),
              ),
            );
          }),
    );
  }
}

    result:enter image description here

    Lastly, you can add a maxline property and textoverflow property

    const Flexible(
                        flex: 5,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("data 1"),
                            Text("data 1"),
                            Text(
                              "Random long text data field which goes on an on an on an",
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ),

    result: enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search