How to solve overflowed pixels in flutter

Question

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))

Answer 1

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:

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:

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: