conan
conan

Reputation: 536

Make Column's child(e.g. Container Layout) wrap_content in horizontal

As the picture shows:

There is a solid line between the two Text(Pokémon, 11.25 AM). What I want is the length of the line equaling to the longest Text length. But the line behaved like match_parent.

In Android Native we can use a vertical LinearLayout, and set android:layout_width="wrap_content" limit in horizontal.

In Flutter we can only set Column mainAxisSize: MainAxisSize.min limit in vertical.

enter image description here

I guess the problem is due to Divider. When Divider is gone, the Column's width is wrap_content.

Experiment is as follows:

enter image description here

enter image description here

      Container(
        color: Colors.red,
        margin: EdgeInsets.symmetric(horizontal: 8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(vertical: 8.0),
              padding: EdgeInsets.all(4.0),
              child: Text(
                'Pokémon',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Divider(
              height: 2.0,
              color: Colors.white,
            ),
            Container(
              margin: EdgeInsets.only(top: 8.0),
              child: Text(
                '11.25 AM',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 12.0,
                    fontWeight: FontWeight.bold),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),

Upvotes: 2

Views: 407

Answers (1)

anmol.majhail
anmol.majhail

Reputation: 51246

You can use - IntrinsicWidth widget. Wrap Column with it.

Container(
          color: Colors.red,
          margin: EdgeInsets.symmetric(horizontal: 8.0),
          child: IntrinsicWidth(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(vertical: 8.0),
                  padding: EdgeInsets.all(4.0),
                  child: Text(
                    'Pokémon',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Divider(
                  height: 2.0,
                  color: Colors.white,
                ),
                Container(
                  margin: EdgeInsets.only(top: 8.0),
                  child: Text(
                    '11.25 AM',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),

enter image description here

Upvotes: 1

Related Questions