Stream Chat Flutter app is not showing my channels

Question

I have this bit of code for my flutter app. The code is first of all meant to show the page that allows users input their username and then show them a list of available channels as I have created on my stream dashboard. Somehow, users are able to register with their usernames but the list of channels don't appear for them to interact. I have created the channels manually on my stream dashboard. What could the problem be?

Here is the code for the whole sequence:


class MyHome extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<ChatModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text("One Government FX Rooms"),
        backgroundColor: Colors.white,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Hero(
              tag: 'logo',
              child: Container(
                width: 400.0,
                child: Image.asset("assets/images/web-logo-250.png"),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 8.0, left: 15, right: 15),
            child: CustomForm(
              controller: _controller,
              formKey: _formKey,
              hintText: "Enter a username..",
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 50.0),
            child: CustomButton(
              onPressed: () async {
                if (_formKey.currentState.validate()) {
                  final user = _controller.value.text;
                  final client = provider.client;

                  await client.setUserWithProvider(
                    User(
                      id: "id_$user",
                      extraData: {
                        "name": "$user",
                        "image": "https://picsum.photos/100/100",
                      },
                    ),
                  );

                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(
                      builder: (_) => StreamChat(
                        child: ChannelView(),
                        client: client,
                      ),
                    ),
                  );
                }
              },
              text: "Submit",
            ),
          ),
        ],
      ),
    );
  }
}

class ChannelView extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  // ignore: deprecated_member_use
  final channels = List<Channel>();

  Future<List<Channel>> getChannels(StreamChatState state) async {
    final filter = {
      "type": "mobile",
    };

    final sort = [
      SortOption(
        "last_message_at",
        direction: SortOption.DESC,
      ),
    ];

    return await state.client.queryChannels(
      filter: filter,
      sort: sort,
    );
  }

  @override
  Widget build(BuildContext context) {
    final streamchat = StreamChat.of(context);
    final client = streamchat.client;
    final provider = Provider.of<ChatModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text("Rooms"),
        backgroundColor: Colors.white,
        leading: Hero(
          tag: 'logo',
          child: Container(
            child: Image.asset("assets/images/social-logo.png"),
          ),
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: FutureBuilder(
              future: getChannels(streamchat),
              builder: (_, AsyncSnapshot<List<Channel>> snapshot) {
                if (!snapshot.hasData) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }

                // clear list to avoid duplicates
                channels.clear();
                // repopulate list
                channels.addAll(snapshot.data);

                if (snapshot.data.length == 0) {
                  return Container();
                }

                return ListView(
                  scrollDirection: Axis.vertical,
                  children: createListOfChannels(snapshot.data, context),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 8.0, left: 15, right: 15),
            child: CustomForm(
              controller: _controller,
              formKey: _formKey,
              hintText: "Create a Room. Admins only!",
            ),
          ),
        ],
      ),
    );
  }
}

class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final streamChannel = StreamChannel.of(context);
    final channel = streamChannel.channel;

    return Scaffold(
      appBar: ChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: MessageListView(
              messageBuilder: (context, msg, idx) {
                final msgReactionCount = msg.reactionCounts ?? {"like": 0};
                return ListTile(
                  leading: Text("${msg.user.name}"),
                  title: Text("${msg.text}"),
                  subtitle: Text("${msg.createdAt.toIso8601String()}"),
                  trailing: Text("Likes: ${msgReactionCount["like"] ?? 0}"),
                  onTap: () async {
                    await channel.sendReaction(msg.id, "like");
                  },
                );
              },
            ),
          ),
          MessageInput(),
        ],
      ),
    );
  }
}

Gordon Hayes Gordon Hayes · Accepted Answer · 2022-05-25T09:39:55

I see you're filtering for the channel type mobile. Make sure that the channels you made are using that channel type. You can inspect what type a channel is from the dashboard in the explorer. The default channel type is messaging.

See here for more info on channel types, and the pre-made types: https://getstream.io/chat/docs/flutter-dart/channel_features/?language=dart

Flutter docs on filtering: https://getstream.io/chat/docs/sdk/flutter/guides/understanding_filters/#filterequal

To retrieve all channels and have it be reactive (realtime), you can use Stream's core controllers to make things a lot simpler. The StreamChannelListController can easily retrieve channels and get updates. This is from the stream_chat_flutter_core package.

Here are the docs: https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter_core/stream_channel_list_controller/

And prebuilt UI component to do most of this for you: https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/stream_channel_list_view/

This comes from the stream_chat_flutter package. Which package you use depends on the level of customisation you need.

Stream Chat Flutter app is not showing my channels

1 Answers