Does anyone know how to fix this? TextOverflow.ellipsis does not help to put ellipsis-CodePudding

I need that if the user had a long nickname, then an ellipsis would appear, but it does not work.

Here is the 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) =>
                                    const MyLikesScreen()));
                          },
                          child: const Icon(
                            Icons.favorite_rounded,
                            size: 25,
                          ),
                        ),
                      ),
                      shadowColor: Colors.black,
                      elevation: 5,
                    ),
                  ),
                ),
              ],
            )
          ],
        ),

CodePudding user response：

Follow this structure

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      children: [
        Flexible(
          child: Text(
            'WWWWWWWWWWWW',

 appBar: AppBar(
  elevation: 0,
  toolbarHeight: 76,
  backgroundColor: Colors.transparent,
  title: Row(
    children: [
      IconButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          icon: Icon(
            Icons.arrow_back_rounded,
            color: Colors.black87.withOpacity(0.7),
            size: 30,
          )),
      const SizedBox(
        width: 20,
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Flexible(
                child: 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),
              Icon(
                Icons.star_rounded,
                color: Colors.yellow.shade700,
                size: 30,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
  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: () {},
                  child: const Icon(
                    Icons.favorite_rounded,
                    size: 25,
                  ),
                ),
              ),
              shadowColor: Colors.black,
              elevation: 5,
            ),
          ),
        ),
      ],
    )
  ],
),

CodePudding user response：

Wrap the Text Widget with Expanded widget.

Expanded(child: Text(
                  'WWWWWWWWWWWW',
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  style: GoogleFonts.roboto(
                      textStyle: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w700,
                    color: Colors.black87.withOpacity(0.7),
                  )),
                )),