CODEWITHSUNDEEP
flutterflutter-layout
Oto-obong Eshiett
Oto-obong Eshiett

Reputation: 1679

How can i place text widget at the horizontal end of a container with a max width, without expanding it

I have a card widget which wraps a container widget with a max width given to it, this is what it looks like :

enter image description here

this is the code below:

Card(
          child: Container(
        constraints: new BoxConstraints(
          maxWidth: 250.0,
        ),
        margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[

            new Flexible(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child:  new Text(messageSnapshot.inbox),
                  ),




                ],
              ),
            ),
          ],
        ),
      ))

problem arises when i try to create another text widget under it, that i specifically want to move to the extreme right below the first text, this is what i get:

enter image description here

The 2nd text widget i added expands, goes to the extreme end as i wanted , but also expands the card to the max-width, i set. This is the code for it:

Card(
     child: Container(
    constraints: new BoxConstraints(
      maxWidth: 250.0,
    ),
    margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[

        new Flexible(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Container(
                margin: const EdgeInsets.only(top: 5.0),
                child:  new Text(messageSnapshot.inbox),
              ),


              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text("3:18am")
                ],
              )

            ],
          ),
        ),
      ],
    ),
  ))

But this is what i want

enter image description here

where the date is is horizontally at the end of the container space the initial text created without it being expanded.

How do i solve this issue ?

Upvotes: 1

Views: 339

Answers (1)

Cardo
Cardo

Reputation: 621

Wrap the elements inside the Flexible widget inside a IntrinsicWidth widget. This will make all children in the Column have the same width. Then, inside the Row for the second element add a MainAxisSize.max property, so it will mimic the first element width and obey the MainAxisAlign.end property the way you want to.

new Flexible(
            child: new IntrinsicWidth(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: new Text(
                      messageSnapshot.inbox,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Text(
                        "3:18am",
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),

Upvotes: 2

Related Questions