I'm currently trying to create a row that consist of maximum 3 column widget with each of them have the property of profile picture, nickname, and status. I wanted each of them to have fixed size so that even when the nickname is long it will still take the same amount of space.

Currently I just make the column to be spaced-evenly and some of the widget still take more space than the other 2. How can I fixed this ? maybe make the nickname turned into dotted (...) when it's too long.

here's my current code:

solverWidgets.add(
  Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      BuildRoundedRectProfile(
        height: 40,
        width: 40,
        name: solverTicket[solver]['nickname'],
        profileLink: solverTicket[solver]['profile_picture_link'] ?? '',
      ),
      SizedBox(height: 3),
      Text(
        solverTicket[solver]['nickname'],
        style: weight600Style.copyWith(
          color: primaryColor,
          fontSize: 13,
        ),
      ),
      if (solversStatus[solver] != null && (povStatus == 'pic' || povStatus == 'pic-client'))
        GestureDetector(
          onTap: () {
            if (solversStatus[solver] == 'Done') {
              setState(() {
                needToLoadSolverWidgets = true;
                isNotExpandedSolverWidgets[solver] = !isNotExpandedSolverWidgets[solver];
              });
              if (isExpandedSolverWidgetsContent[solver]) {
                Future.delayed(Duration(milliseconds: 300), () {
                  setState(() {
                    needToLoadSolverWidgets = true;
                    isExpandedSolverWidgetsContent[solver] = false;
                  });
                });
              } else {
                setState(() {
                  needToLoadSolverWidgets = true;
                  isExpandedSolverWidgetsContent[solver] = true;
                });
              }
            }
          },
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            height: isNotExpandedSolverWidgets[solver] ? 20 : 55,
            padding: EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 5),
            decoration: BoxDecoration(
              color: defaultProfileColor.withOpacity(0.2),
              borderRadius: BorderRadius.circular(10),
            ),
            child: solversStatus[solver] != 'Done' ?
            Text(
              solversStatus[solver],
              style: primaryColor600Style.copyWith(
                fontSize: fontSize9,
              ),
            ).tr() : isNotExpandedSolverWidgets[solver] ?
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  solversStatus[solver],
                  style: primaryColor600Style.copyWith(
                    fontSize: fontSize10,
                  ),
                ).tr(),
                Icon(
                  Icons.arrow_drop_down,
                  size: fontSize15,
                ),
              ],
            ) : ClipRRect(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Row(
                      children: [
                        Text(
                          solversStatus[solver],
                          style: primaryColor600Style
                              .copyWith(
                            fontSize: fontSize9,
                          ),
                        ).tr(),
                        Icon(
                          Icons.arrow_drop_down,
                          size: fontSize18,
                        ),
                      ],
                    ),
                    GestureDetector(
                      onTap: () {
                        showDialog(
                            context: context,
                            builder: (BuildContext
                            context) =>
                                ReusableConfirmationDialog(
                                    titleText: 'changeWorkStatus'.tr(),
                                    contentText: 'rejectWorkStatus'.tr(),
                                    confirmButtonText: 'yes'.tr(),
                                    onConfirm: () async {
                                      await Database.changeWorkStatus(
                                          ticketId: widget.ticketId,
                                          ticketData: ticketData,
                                          targetId: solver as String,
                                          oldWorkStatus: 'done',
                                          workStatus: 'todo');
                                      Navigator.pop(context);
                                      setState(() {
                                        isNotExpandedSolverWidgets[solver] = true;
                                        needToLoadTicket = true;
                                      });
                                    }));
                      },
                      child: Container(
                        padding: EdgeInsets.all(5),
                        decoration: BoxDecoration(
                          color: warningColor,
                          borderRadius:
                          BorderRadius.circular(5),
                        ),
                        child: Text(
                          'disagree',
                          style: primaryColor600Style
                              .copyWith(
                            fontSize: fontSize9,
                            color: Colors.white,
                          ),
                        ).tr(),
                      ),
                    )
                  ]),
            ),
          ),
        ),
      if(solversStatus[solver] != null && (povStatus != 'pic' && povStatus != 'pic-client'))
        Container(
          padding: EdgeInsets.all(5),
          decoration: BoxDecoration(
              color: formBackgroundColor,
              borderRadius: BorderRadius.all(
                  Radius.circular(10))),
          child: Text(
            solversStatus[solver],
            style: weight600Style.copyWith(
              color: primaryColor,
              fontSize: 9,
            ),
          ),
        ),
    ],
  ),
);

CodePudding user response：

use Text overflow

Text(
              'You have pushed the button this many times:dfjhejh dskfjkawejfkjadshfkljhaskdfhekjnkjvnkjasdklfjjekjlkj',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            )

CodePudding user response：

or You can use https://pub.dev/packages/marquee package, it will scroll your text infinitly. make sure to wrap this marquee widget in a sizedbox with height and width defined.