flutterdartflutter-layoutflutter-text

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


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

Here is a screenshot

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

Solution

  • 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,
                ),
              ),
            ),
          ],
        )
      ],
    ),