skip to Main Content

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!

2

Answers


  1. You can wrap topest widget in app in

    SingleChildScrollView()
    
    Login or Signup to reply.
  2. 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…

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search