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

Flutter – Align a widget with respect to another widget with dynamic width

I am designing a chat UI. As it is a chat so message body can be any length. Wrapping with a Container to give a nice circular design. below my code of my current design.

 Flexible(
        child: Container(
            decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                color: AppColors.chatMessageBg),
            margin: const EdgeInsets.only(top: 8, right: 100),
            padding: const EdgeInsets.only(
                left: 16, right: 16, top: 8, bottom: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                messageBodyView(index, item),
                timeView(item)
              ],
            ))),

enter image description here

What I want is the Time text on the right side.

I tried with Align widget, then this happened

enter image description here

What I want to achieve

enter image description here

I hope you all understand my problem.

Tags:

2

Answers


  1. 0

    Use a stack instead of a column, a row with min size and very important to remove the align from the time field, instead, wrap it with positioned with bottom and right both set to 0. Also, use an align for your container, instead of the margins to push it to the left (or the right).

    Here’s the code:

    Flexible(
                    child: Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                      decoration: const BoxDecoration(
                          borderRadius:
                              BorderRadius.all(Radius.circular(20)),
                          color: Colors.amber),
                      //margin: const EdgeInsets.only(top: 8, right: 100),
                      padding: const EdgeInsets.only(
                          left: 16, right: 16, top: 8, bottom: 8),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Stack(
                            children: [
                              Padding(
                                padding:
                                    const EdgeInsets.only(bottom: 18.0),
                                child: messageBodyView(index, item),
                              ),
                              Positioned(
                                  child: timeView(item), bottom: 0, right: 0)
                            ],
                          ),
                        ],
                      )),
                ))
    Login or Signup to reply.
  2. 0

    Use constraints in Container.

    Flexible(
   child: Container(
     constraints:BoxConstraints( 
       maxWidth:200,
      ),
     decoration: const BoxDecoration(                  
       borderRadius: 
        BorderRadius.all( 
        Radius.circular(20)),
       color:AppColors.chatMessageBg),
       margin: const 
        EdgeInsets.only(top: 8, right:     
         100),
       padding: const EdgeInsets.only(
                left: 16, right: 16, 
                top: 8, bottom: 8),
       child: Column(
              crossAxisAlignment:   
             CrossAxisAlignment.start,
       children: [
          Row(
         mainAxisAlignment: 
          MainAxisAlignment.start, 
         children: 
          [messageBodyView(index, item),]),
          Row(
         mainAxisAlignment:  
          MainAxisAlignment.end, 
         children: [ timeView(item)]),
              ],
            ))),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search