Question 174964 in Flutter Question posted in
The official Flutter documentation can be found here.

When will the deadline be?

text is taking unnecessary height inside column, (Samantha & Angelica for example)

Screenshot with inspecter widget enabled

This is the code of the screen

return GestureDetector(
        onTap: tap,
        child: Container(
          margin: const EdgeInsets.only(
              left: kDefaultPadding,
              top: kDefaultPadding / 2,
              bottom: kDefaultPadding * 2),
          width: size.width * 0.4,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(image),
              Container(
                  // width: size.width * 0.4,
                  padding: const EdgeInsets.all(kDefaultPadding / 2),
                  decoration: BoxDecoration(color: Colors.white, boxShadow: [
                    BoxShadow(
                        offset: Offset(0, 0),
                        blurRadius: 50,
                        color: kPrimaryColor.withOpacity(0.15))
                  ]),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Text(
                              "${title.toUpperCase()}n",
                              style: TextStyle(
                                  fontSize: fontSize,
                                  overflow: TextOverflow.ellipsis),
                            ),
                          ),
                          Text("$$price",
                              style: TextStyle(
                                  fontSize: fontSize - 2,
                                  color: kPrimaryColor.withOpacity(0.8))),
                        ],
                      ),
                      Text(
                        country,
                        style: TextStyle(
                            fontSize: fontSize - 2,
                            color: kPrimaryColor.withOpacity(0.8)),
                      )
                    ],
                  ))
            ],
          ),
        ));

I use a Column with two items,Row and A Text(Which contains the country), and inside the Row I have to Items the owner and the Price

I tried

 mainAxisSize: MainAxisSize.min

And it’s not working

Tags:

2

Answers


  1. 0

    You can give it a fixed size (or calculate it depending on the screen height) or you just wrap your Row with a InstrinctHeight, but this is kinda expensive, from the docs:

    This class is relatively expensive, because it adds a speculative
    layout pass before the final layout phase. Avoid using it where
    possible. In the worst case, this widget can result in a layout that
    is O(N²) in the depth of the tree.

    Login or Signup to reply.
  2. 0

    The text widget is taking exactly the amount of height is needs for the text that you specified. Since you are inserting a newline character n appended to the title, it will clearly take two lines instead of one.

    Change this:

    Text(
    "${title.toUpperCase()}n", // <= Do not insert 'n'                   
    style: TextStyle(
        fontSize: fontSize,
        overflow: TextOverflow.ellipsis,
    ),
)

    To this:

    Text(
    title.toUpperCase(), // <= Removed 'n', now the height is correct.                 
    style: TextStyle(
        fontSize: fontSize,
        overflow: TextOverflow.ellipsis
    ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search