Align a Widget Left/Right of a Column with dynamic width

Shahadat Hossain Shaki
2 min readAug 6, 2023

--

I came across this problem while designing a Chat UI. Let me share chat ui first, then discuss the problem.

Here I have a container with a round shape Background, Which has dynamic width, Longer the message longer its width. I have 2 Text widgets, One for the message and another one for the time. So far it's easy, Need a Column with 2 children, Easy right??

Now the trickiest part is, I want Time to Right align the Message widget. So wrapping time Text widget with Align widget, Here is the problem stats. Align widget taking all available widths and aligning the time. which show below

See the problem?? UI broken.

Now the solution

I solved this with Stack widget. below is the code for the full UI.

Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const SizedBox(width: 16),
loadCircleImage(
imageUrl: controller.conversation.value.host.image.url,
width: 25,
height: 25),
const SizedBox(width: 10),
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: Stack( //Solution stats from here
children: [
Padding(
padding: EdgeInsets.only(bottom: 15),
child: messageBodyView(index, item),
),
Opacity(
opacity: 0,
child: timeView(item),
),
Positioned(child: timeView(item), bottom: 0, right: 0)
],
)))
],
)

Here I had to use the Opacity widget because Positioned widget gets the width of the Stack widget. So showing invisible time to set stack widget minimum width of time.

--

--

Shahadat Hossain Shaki
Shahadat Hossain Shaki

Written by Shahadat Hossain Shaki

Co-Founder and Android developer of Happihub. Loves to develop things.

No responses yet