I have this issue with my Flutter UI. I'm trying to make my text break when it's too long, but the overflow ellipsis doesn't work. Can you help me please?

issue picture:

this is what i'm looking for:

My code:

    static Drawer myDrawer (BuildContext context, String mode, String businessName) {
    return Drawer(
      child: Container(
        child: ListView(
          padding: EdgeInsets.only(top:0),
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [

                Container(
                  width: double.infinity,
                  height: MediaQuery.of(context).size.height * 0.17,
                  child: CustomPaint(
                    painter: DrawerHeaderPaint(),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(width: 25),
                        CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 30,
                          child: Image(
                            height: 40,
                            image: AssetImage('assets/logo.png')
                          ),
                        ),
                        SizedBox(width: 10),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'My Companny',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.w900,
                                fontSize: 25
                              ),
                            ),
                            Container(
                              color: Colors.red,
                              child: Row(
                                children: [
                                  Icon(Icons.apartment, color: Color(0xff263d67)),
                                  Text(
                                    'Business Name tooooo loooooong',
                                    overflow: TextOverflow.ellipsis,
                                    maxLines: 1,
                                    softWrap: false,
                                    style: TextStyle(
                                      fontFamily: 'Poppins',
                                      color: Color(0xffd7d7d7),
                                      fontWeight: FontWeight.w700,
                                      fontSize: 16,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ),

                SizedBox(height: 40),
                menuOptions(),
              ],
            )
          ],
        ),
      )
    );
  }

CodePudding user response：

Use a Expanded or Flexible

  Expanded(
      child:
        Text('Business Name tooooo loooooong',...))

CodePudding user response：

Try wrapping Business Info Column with Expanded widget and also wrap Text widget after apartment icon with Expanded widget, like so:

Expanded(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        'My Companny',
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w900,
          fontSize: 25,
        ), //TextStyle
      ), //Text
      Container(
        color: Colors.red,
        child: Row(
          children: const [
            Icon(Icons.apartment, color: Color(0xff263d67)),
            Expanded(
              child: Text(
                'Business Name tooooo loooooong',
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                softWrap: false,
                style: TextStyle(
                  fontFamily: 'Poppins',
                  color: Color(0xffd7d7d7),
                  fontWeight: FontWeight.w700,
                  fontSize: 16,
                ),  //TextStyle
              ),  //Text 
            ),  //Expanded
          ],  
        ),  //Row         
      ),  //Container
    ],
  ),  //Column
),  //Expand

CodePudding user response：

//you can use the SizedBox widget and specify your text width it helps to ellipsis the text. Hope this code will help you.Thanks  
        import 'package:flutter/cupertino.dart';
            import 'package:flutter/material.dart';
            
            class Dermo extends StatefulWidget {
              const Dermo({Key? key}) : super(key: key);
            
              @override
              _DermoState createState() => _DermoState();
            }
            
            class _DermoState extends State<Dermo> {
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    backgroundColor: Colors.red,
                  )
                    ,
                    drawer: Drawer(
                      backgroundColor: Colors.green,
                        child: Container(
                  child: ListView(
                    padding: EdgeInsets.only(top: 0),
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            width: double.infinity,
                            height: MediaQuery.of(context).size.height * 0.17,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                SizedBox(width: 25),
                                CircleAvatar(
                                  backgroundColor: Colors.white,
                                  radius: 30,
                                  child: Image(
                                      height: 40, image: AssetImage('assets/logo.png')),
                                ),
                                SizedBox(width: 10),
                                Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'My Companny',
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w900,
                                          fontSize: 25),
                                    ),
                                    Container(
                                      color: Colors.red,
                                      child: Row(
                                        children: [
                                          Icon(Icons.apartment, color: Color(0xff263d67)),
                                          ///if you  want to show complete text use can comment 
                                          ///out overflow,softWrap and maxLines otherwise you can use all 
                                          ///these properties it ellipsis the text
                                          SizedBox(
                                            width: 160,
                                            child: Text(
                                              'Business Name tooooo loooooong',
                                             /* overflow: TextOverflow.ellipsis,
                                              maxLines: 1,
                                              softWrap: false,*/
                                              style: TextStyle(
                                                fontFamily: 'Poppins',
                                                color: Color(0xffd7d7d7),
                                                fontWeight: FontWeight.w700,
                                                fontSize: 16,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 40),
                        ],
                      )
                    ],
                  ),
                )));
              }
            }