This is my first time with Flutter and I’m developing a chat app.
I have a text input widget which vertically expands on user typing.
I encountered a bottom overflow error, I tried different solutions to solve the problem with no success.
This is the input widget:
Widget build(BuildContext context) {
return SizedBox(
child: DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
),
child: Padding(
padding: HearthTheme().padding.sendMessageBar,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(width: HearthTheme().spacing.m),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
LocaleKeys.actionBarLeftMessages.tr(
args: [
widget.credits.toString(),
],
),
style: getSmallTextStyle(context),
),
SizedBox(
height: HearthTheme().spacing.m,
),
Padding(
padding: EdgeInsets.all(0),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).colorScheme.secondary,
width: 1,
),
borderRadius: HearthTheme().borderRadius.md,
),
child: Flexible(
child: Padding(
padding: HearthTheme().padding.textFieldSendMessage,
child: TextField(
controller: controller,
style: getInputTextStyle(context),
decoration: InputDecoration(
hintText: LocaleKeys.actionbarType.tr(),
hintStyle: getInputTextStyle(context),
border: InputBorder.none,
),
onChanged: (_) => _updateButtonState(),
onSubmitted: (_) => _sendMessageQuestion(),
maxLines: null,
),
),
),
),
),
],
),
),
SizedBox(width: HearthTheme().spacing.m),
GestureDetector(
onTap: _isButtonEnabled && !widget.loading ? _sendMessageQuestion : null,
child: Padding(
padding: EdgeInsets.only(bottom: 6.6),
child: _isButtonEnabled && !widget.loading ? Image.asset(AppAssets.sendActive) : Image.asset(AppAssets.sendInactive),
)),
SizedBox(width: HearthTheme().spacing.m),
],
),
),
),
);
}
And this is the parent widget:
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
resizeToAvoidBottomInset : true,
appBar: AppbarWidget(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SettingsPage(),
),
);
},
),
body: SafeArea(
child: Column(
children: [
Expanded(
child: _MessageList(
scrollController: scrollController,
date: formattedDate,
loading: chatState.loadingBubble,
messages: chatState.messages.length > 0
? [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]
: [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]),
),
_ActionBar(
scrollController: scrollController,
loading: chatState.loadingBubble,
credits: chatState.credits,
),
],
),
),
),
);
This is the input image
And this is the error image
How can I solve this bug?
Thanks!
2
Answers
You can wrap topest widget in app in
Hey please try this code…
Also Please do this in your code.
Thank You for asking questions…