title: Does anyone know how to fix this? TextOverflow.ellipsis does not help to put ellipsis
body: <p>I need that if the user had a long nickname, then an ellipsis would appear, but it does not work.</p>
  <p><a href="https://i.stack.imgur.com/V7wwj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V7wwj.png" alt="Here is a screenshot" /></a></p>
  <p>Here is the code:</p>
  <pre><code>AppBar(
            elevation: 0,
            toolbarHeight: 76,
            backgroundColor: Colors.transparent,
            title: Row(
              children: [
                widget.isActiveBackButton
                    ? IconButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        icon: Icon(
                          Icons.arrow_back_rounded,
                          color: Colors.black87.withOpacity(0.7),
                          size: 30,
                        ))
                    : Container(),
                widget.isActiveBackButton
                    ? const SizedBox(
                        width: 20,
                      )
                    : Container(),
                Padding(
                  padding: const EdgeInsets.only(right: 20.0),
                  child: Row(
                    children: [
                      Text(
                        'WWWWWWWWWWWW',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        style: GoogleFonts.roboto(
                            textStyle: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.w700,
                          color: Colors.black87.withOpacity(0.7),
                        )),
                      ),
                      const SizedBox(width: 5.0),
                      !UserData.isVerifiedAccount
                          ? Icon(
                              Icons.star_rounded,
                              color: Colors.yellow.shade700,
                              size: 30,
                            )
                          : Container(),
                    ],
                  ),
                ),
              ],
            ),
            actions: [
              Row(
                children: [
                  Container(
                    margin: const EdgeInsets.only(right: 15.0),
                    child: CircleAvatar(
                      radius: 25,
                      child: Material(
                        borderRadius: BorderRadius.circular(100.0),
                        clipBehavior: Clip.antiAlias,
                        color: Colors.redAccent,
                        child: SizedBox(
                          width: 100,
                          height: 50,
                          child: InkWell(
                            onTap: () {
                              Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) =&gt;
                                      const MyLikesScreen()));
                            },
                            child: const Icon(
                              Icons.favorite_rounded,
                              size: 25,
                            ),
                          ),
                        ),
                        shadowColor: Colors.black,
                        elevation: 5,
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
  </code></pre>