1

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 enter image description here And this is the error image enter image description here

How can I solve this bug? Thanks!

Aurora
  • 119
  • 1
  • 7
  • set it to false `resizeToAvoidBottomInset: false`, and/or if you have overflow problems after doing it use this `body: SingleChildScrollView(child: WidgetbodyHere..... ))`. P.S.: You have a nice name :) – G3nt_M3caj Apr 13 '23 at 19:02

2 Answers2

0

You can wrap topest widget in app in

SingleChildScrollView()
0

Hey please try this code...

TextFormField(
  autofocus: true,
  autocorrect: false,
  keyboardType: TextInputType.multiline,
  minLines: 1,
  maxLines: 8,
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.black,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1),
    ),
  ),
),

enter image description here

Also Please do this in your code.

SingleChildScrollView(
                    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,
                        ),
                      ],
                    ),
                  ),

Thank You for asking questions...

Vasoya Jemish
  • 191
  • 1
  • 10