How to make Container widget take only the required space in flutter? - flutter

Question

I am working on a chat application using flutter. In that, I have to create a chat screen containing messages. I want each message container to take only the required space. For example: Short message, short container width & Long message, long container. Currently, it's taking full space of the Column container no matter what's the length of the message.
As a side note, I have tried wrapping the message container inside flexible but it didn't work at all.
Here's my code:
import 'package:flutter/material.dart';
import 'package:memomessenger/Services/Chats.dart';
import 'package:memomessenger/Services/Constants.dart';
import 'package:memomessenger/Services/Types/Chat.dart';
import 'package:memomessenger/Services/Types/ChatsActivity.dart';
import 'package:memomessenger/Services/User.dart';
Widget buildMessageWidget(
BuildContext context, Message message, String currentUserId) {
final bool isFromCurrentUser = message.senderId == currentUserId;
return LimitedBox(
maxWidth: MediaQuery.of(context).size.width * .75,
child: Container(
margin: EdgeInsets.symmetric(vertical: 2),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
isFromCurrentUser ? 0 : messageBorderRadius,
),
topLeft: Radius.circular(
isFromCurrentUser ? messageBorderRadius : 0,
),
bottomLeft: Radius.circular(messageBorderRadius),
bottomRight: Radius.circular(messageBorderRadius),
),
color: isFromCurrentUser ? themeAccentColor[500] : Colors.cyan,
),
child: Align(
alignment:
isFromCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
child: Text(
message.text,
style: TextStyle(
color: isFromCurrentUser ? Colors.white : Colors.black,
),
),
),
),
);
}
Widget buildChatMessagesUI(BuildContext context, List<Message> messages) {
final String currentUserId = currentUser.value.id;
return SingleChildScrollView(
child: Column(
verticalDirection: VerticalDirection.up,
children: messages.reversed.map((Message message) {
return buildMessageWidget(context, message, currentUserId);
}).toList(),
),
);
}
Widget buildMessageInputUI({#required String chatId}) {
final String currentUserId = currentUser.value.id;
return TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your email',
),
onChanged: (String message) {
sendMessage(chatId, Message(text: message, senderId: currentUserId));
},
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
autofocus: true,
autocorrect: true,
keyboardType: TextInputType.multiline,
);
}
class ChatActivity extends StatelessWidget {
final String chatId;
ChatActivity({#required this.chatId});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: StreamBuilder<Map<String, Chat>>(
stream: chatActivityChatList,
initialData: {},
builder: (BuildContext context,
AsyncSnapshot<Map<String, Chat>> data) {
if (data.hasData && data.data[chatId] != null) {
return buildChatMessagesUI(
context, data.data[chatId].messages);
} else {
return Text("No Data");
}
},
),
),
buildMessageInputUI(chatId: chatId),
],
),
),
),
),
);
}
}

Answer 1

The Align widget sizes itself to its incoming constraints if bounded, and your Container with a decoration is placed around it. This means the decoration will cover the entire width of the column. To fix this, the DecoratedBox (produced by Container) needs to be a descendant of Align instead.
Another problem you may have noticed is that LimitedBox does nothing if the incoming constraint is already bounded. In order to tighten the existing bound, you will need to provide constraints in your Container (or equivalently, a ConstrainedBox widget). FractionallySizedBox might also be worth considering.
Widget buildMessageWidget(
BuildContext context, Message message, String currentUserId) {
final bool isFromCurrentUser = message.senderId == currentUserId;
return Align(
alignment:
isFromCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
margin: EdgeInsets.symmetric(vertical: 2),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * .75
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
isFromCurrentUser ? 0 : messageBorderRadius,
),
topLeft: Radius.circular(
isFromCurrentUser ? messageBorderRadius : 0,
),
bottomLeft: Radius.circular(messageBorderRadius),
bottomRight: Radius.circular(messageBorderRadius),
),
color: isFromCurrentUser ? themeAccentColor[500] : Colors.cyan,
),
child: Text(
message.text,
style: TextStyle(
color: isFromCurrentUser ? Colors.white : Colors.black,
),
),
),
);
}