Flutter DrawerHeader 文本溢出

Question

我的 Flutter UI 有这个问题。我试图让我的文本在太长时中断，但溢出省略号不起作用。你能帮帮我吗？

发布图片：

这就是我要找的：

我的代码：

    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(),
              ],
            )
          ],
        ),
      )
    );
  }

Answer 1

使用扩展或灵活

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

Answer 2

尝试使用 Expanded 小部件包裹商家信息列，并使用 Expanded 小部件将 Text 小部件包裹在公寓图标之后，如下所示：

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

Answer 3

//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),
                        ],
                      )
                    ],
                  ),
                )));
              }
            }