GetStream / stream-chat-flutter

Flutter Chat SDK - Build your own chat app experience using Dart, Flutter and the Stream Chat Messaging API.
https://getstream.io/chat/sdk/flutter/
Other
907 stars 334 forks source link

When keyboard appears chat screen shows blank space. #1179

Closed KushalxPathak closed 2 years ago

KushalxPathak commented 2 years ago

I am facing an issue while using stream_chat_flutter in my app that when typing a message the chat screen pulls up more than it should. This is not a issue I suppose so adding it as a normal question or help. Thanks for the help.

https://user-images.githubusercontent.com/94827568/170216652-50c74658-0ce7-4d90-a7bd-015de2492ca0.mp4

imtoori commented 2 years ago

hey @KushalxPathak can you show me the code you're using to show the list of messages + the input?

KushalxPathak commented 2 years ago

I am following the example mentioned in documentation.

class ChannelPage extends StatelessWidget 
{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const StreamChannelHeader(),
      body: Column(
        children: const <Widget>[
          Expanded(
            child: StreamMessageListView(),
          ),
          StreamMessageInput(),
        ],
      ),
    );
  }
}
imtoori commented 2 years ago

I have no idea honestly, I think it's linked to the navigation bar somehow

KushalxPathak commented 2 years ago

I might be, Actually what I think is that I am using StreamChat( client: client, child: widget, ); in a MaterialApp as shown in example like this

return MaterialApp(
      builder: (context, widget) {
        return StreamChat(
          client: client,
          child: widget,
        );
      },
      debugShowCheckedModeBanner: false,
      home: StreamChannel(
        channel: channel,
        child:  ChannelListPage(),
      ),
    );

so basically it's nested Material APP in main MaterialAPP. But when I tried to Use it with out putting it in a Material app like this,

return StreamChat(
      client: client,
      child: StreamChannel(
        channel: channel,
        child:  ChannelListPage(),
      ),
    );

I get ChannelListPage() working perfectly fine but ChannelPage() shows error like below.

You must have a StreamChatTheme widget at the top of your widget tree 'package:stream_chat_flutter/src/stream_chat_theme.dart': Failed assertion: line 28 pos 7: 'streamChatTheme != null'

Screenshot 2022-05-31 at 3 02 37 PM
KushalxPathak commented 2 years ago

@imtoori I also came across this issue raised before by some one #740 .

imtoori commented 2 years ago

mmm StreamChat is not a MaterialApp, you always need to wrap it in a MaterialApp

740 was a bit different, since they were actually using a nested MaterialApp

But wait a sec, maybe I don't have the full image: are you using the StreamChat widget under the chat tab only wrapping it in a MaterialApp? is that the case?

KushalxPathak commented 2 years ago

@imtoori yes that's what I am doing. Let me explain the widget flow. MaterialAPP(root MaterialAPP)->HomePage with Bottom Navigator->In this the Chat tab has MaterialAPP->StreamChat()->home in this Material APP is StreamChannel() and so fourth.

imtoori commented 2 years ago

I think you can put the StreamChat widget in your first MaterialApp If you want to connect only when you're on the chat tab I think you can just defer the connectUser call

KushalxPathak commented 2 years ago

OK that worked like a charm. What I did is I put StreamChat() in my first MaterialApp, and put the StreamChannel() in Chat Tab in Bottom Navigator. Still got the issue of that bottom space because I am using persistent Bottom navigator tab , So I changed Navigator of ChannelPage() to Get Navigation routing (I am using Get X as a State Management in this project). and It Pushed ChannelPage() in new screen.

@imtoori Thanks for the assistance , much appreciated.