Flutter Activity Feed Tutorial

Stream's Activity Feed V3 SDK enables teams of all sizes to build scalable activity feeds. This SDK is designed to enable you to get a feed application up and running quickly and efficiently while supporting customization for complex use cases.

In this tutorial, we will use Stream's Activity Feed V3 SDK for Flutter to:

Set up a simple activity feed application and connect it to Stream's Activity Feed V3 SDK.
Create user and timeline feeds.
Add activities, reactions and comments.
Explore new content with "For you" feed.

Here is a quick visual overview of the application we're building:

Project Setup and Installation

To follow the tutorial make sure you're installed Flutter and your IDE of choice. The tutorial is focussed on Android and/or iOS, but can run on other platforms as well.

As a first step, you need to create a new Flutter project and install the dependencies we'll use in the tutorial.

We'll start the tutorial from the initial commit. If you wish to see the finished source code, it's the latest commit in the stream-feeds-flutter-tutorial repository.

bash

1
2
3
flutter create stream_feeds_flutter_tutorial
cd stream_feeds_flutter_tutorial
flutter pub add stream_feeds image_picker flutter_state_notifier

Open the project with your IDE of choice, such as Android Studio or VS Code.

In the pubspec.yaml file you should see the stream_feeds, image_picker and flutter_state_notifier dependencies:

pubspec.yaml (yaml)

1
2
3
4
dependencies:
  stream_feeds: ^latest
  image_picker: ^latest
  flutter_state_notifier: ^latest

To make the tutorial as easy as possible, we generated credentials for you to pick up and use. These credentials consist of:

API_KEY - an API key that is used to identify your Stream application by our servers
id and token - authorization information of the current user
name - optional, used as a display name of the current user

To start using credentials, replace the contents of the main.dart file. You can remove everything that's already there and add the following:

main.dart (dart)

1
2
3
4
const String apiKey = 'REPLACE_WITH_API_KEY';
const String userId = 'REPLACE_WITH_USER_ID';
const String userToken = 'REPLACE_WITH_TOKEN';
const String name = 'REPLACE_WITH_USER_NAME';

Security Note: In production applications, never expose your API secret or generate tokens on the client side. Tokens should always be generated on your backend server to ensure security. The credentials in this tutorial are for development purposes only.

Connect to the Stream API

Let's create and connect the demo user to the Stream API.

To achieve this, we're creating a StreamFeedsClient and connect it while starting the app.

main.dart (dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';
import 'package:stream_feeds/stream_feeds.dart';

const String apiKey = 'REPLACE_WITH_API_KEY';
const String userId = 'REPLACE_WITH_USER_ID';
const String userToken = 'REPLACE_WITH_TOKEN';
const String name = 'REPLACE_WITH_USER_NAME';

final client = StreamFeedsClient(
  apiKey: apiKey,
  user: User(id: userId, name: name),
  tokenProvider: TokenProvider.static(UserToken(userToken)),
);

Future<void> main() async {
  runApp(const Center(child: CircularProgressIndicator()));
  await client.connect();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stream Feeds Tutorial',
      home: const Placeholder(),
    );
  }
}

For simplicity, the tutorial doesn't handle errors. In a real application, you should always make sure to handle errors.

Creating Feeds

In this step we're creating a few feeds using built-in feed groups. Before we dive into the code, let's understand the core concepts:

User Feed: A feed that contains all activities (posts) created by a specific user. Each user has their own user feed (e.g., user:alice).
Timeline Feed: A feed that contains activities from all the feeds that you follow. When you follow someone's user feed, their activities automatically appear in your timeline feed (this concept is called fan-out).
Follow Relationship: When you follow a user's feed, your timeline feed subscribes to their user feed. This means new activities from followed users automatically appear in your timeline.

Let's see what the concept looks like in code (no need to add this to your app yet):

dart

1
2
3
4
5
6
7
// Using user id for the feed id, but you can use any id you want to
final userFeed = client.feedFromId(FeedId.user(userId));
await userFeed.getOrCreate();

// This is our timeline feed where we want to see posts from people we follow
final timelineFeed = client.feedFromId(FeedId.timeline(userId));
await timelineFeed.getOrCreate();

To ensure our own posts are part of our timeline, we need to set up the follow relationship:

dart

1
2
3
4
5
6
7
8
// You typically create these relationships on your server-side, we do this here for simplicity
final followsSelf = timelineFeed.currentState.following.any(
  (follow) => follow.targetFeed.id == userFeed.id,
);

if (!followsSelf) {
  await timelineFeed.follow(userFeed);
}

The two main screens of our app, Home and Explore, are going to be part of MyHomePage, so let's add code to create the feeds and dispose them there:

main.dart (dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stream Feeds Tutorial',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = true;
  late final Feed userFeed;
  late final Feed timelineFeed;
  late final Feed exploreFeed;

  @override
  void initState() {
    super.initState();
    _loadFeeds();
  }

  Future<void> _loadFeeds() async {
    userFeed = client.feedFromId(FeedId.user(userId));
    await userFeed.getOrCreate();

    timelineFeed = client.feedFromId(FeedId.timeline(userId));
    await timelineFeed.getOrCreate();

    final followsSelf = timelineFeed.state.following.any(
      (follow) => follow.targetFeed.fid == userFeed.fid,
    );

    if (!followsSelf) {
      await timelineFeed.follow(targetFid: userFeed.fid);
    }
    setState(() {
      isLoading = false;
    });
  }

  @override
  void dispose() {
    userFeed.dispose();
    timelineFeed.dispose();
    super.dispose();
  }

  int _index = 0;

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      appBar: AppBar(title: Text('Stream Feeds Tutorial')),
      body: _index == 0
          ? Placeholder()
          : Placeholder(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Explore'),
        ],
        currentIndex: _index,
        onTap: (index) => setState(() => _index = index),
      ),
    );
  }
}

Activity List

Activity Feeds SDKs don't have UI components (yet).

Now that we created feeds, we can create UI components to display the activities. To achieve this we're creating an ActivityItem component.

For now, the ActivityItem displays only the most basic activity information (for example activity.text) and parameters that we'll be relevant in a bit, when we'll extend it with more features. We'll create new files: activity_item.dart and activity_list_view.dart and add the following code:

activity_item.dart

activity_list_view.dart

main.dart

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import 'package:flutter/material.dart';
import 'package:stream_feeds/stream_feeds.dart';

class ActivityItem extends StatelessWidget {
  const ActivityItem({
    super.key,
    required this.currentUserId,
    required this.activity,
    required this.onFollow,
    required this.onUnfollow,
    required this.onCommentPressed,
    required this.onLikePressed,
  });

  final String currentUserId;
  final ActivityData activity;
  final ValueSetter<FeedId> onFollow;
  final ValueSetter<FeedId> onUnfollow;
  final VoidCallback onCommentPressed;
  final VoidCallback onLikePressed;

  @override
  Widget build(BuildContext context) {
    return Text(activity.text ?? '');
  }
}

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:stream_feeds/stream_feeds.dart';

import 'activity_item.dart';

class ActivityListView extends StatelessWidget {
  const ActivityListView({
    super.key,
    required this.client,
    required this.feed,
    required this.onFollow,
    required this.onUnfollow,
  });
  final StreamFeedsClient client;
  final Feed feed;
  final ValueSetter<FeedId> onFollow;
  final ValueSetter<FeedId> onUnfollow;

  @override
  Widget build(BuildContext context) {
    return StateNotifierBuilder(
      stateNotifier: feed.notifier,
      builder: (context, state, child) {
        if (state.activities.isEmpty) {
          return Center(child: const Text('No posts yet'));
        }
        return ListView(
          children: [
            ...state.activities.map(
              (activity) => ActivityItem(
                currentUserId: client.user.id,
                activity: activity,
                onFollow: onFollow,
                onUnfollow: onUnfollow,
                onCommentPressed: () {},
                onLikePressed: () {},
              ),
            ),
            if (feed.state.canLoadMoreActivities)
              TextButton(
                onPressed: () => feed.queryMoreActivities(),
                child: Text('Load more'),
              ),
          ],
        );
      },
    );
  }
}

new imports (dart)

1
import 'activity_list_view.dart';

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class _MyHomePageState extends State<MyHomePage> {
  /// (... initState and dispose methods ...)

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      appBar: AppBar(title: Text('Stream Feeds Tutorial')),
      body: _index == 0
          ? ActivityListView(
              feed: timelineFeed,
              onFollow: onFollow,
              onUnfollow: onUnfollow,
              client: client,
            )
          : Placeholder(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Explore'),
        ],
        currentIndex: _index,
        onTap: (index) => setState(() => _index = index),
      ),
    );
  }

  void onFollow(FeedId feed) {}
  void onUnfollow(FeedId feed) {}
}

The activity list is currently empty. We'll change that in the next step. Before doing that, let's recap what we did in this step:

We created an instance of StreamFeedsClient for our user (1 instance maps to 1 user)
We used the client to create userFeed and timelineFeed, representing the feeds of the user's own activities and followed users' activities respectively
We created an ActivityItem component and used it to display the activities from the timeline feed's state
- feed.notifier is a StateNotifier that automatically updates when activities are updated

Activity Composer

Let's add an ActivityComposer component and add it with a Column to the first tab of MyHomePage:

As mentioned previously: users post on their user feed and their posts automatically appear in their timeline feed via follow relationship.

activity_composer.dart

main.dart

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import 'package:flutter/material.dart';
import 'package:stream_feeds/stream_feeds.dart';

class ActivityComposer extends StatefulWidget {
  const ActivityComposer({super.key, required this.userFeed});

  final Feed userFeed;

  @override
  State<ActivityComposer> createState() => _ActivityComposerState();
}

class _ActivityComposerState extends State<ActivityComposer> {
  final TextEditingController _controller = TextEditingController();
  bool _hasText = false;
  bool _isSending = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final hasText = _controller.text.trim().isNotEmpty;
      if (_hasText != hasText) {
        setState(() => _hasText = hasText);
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'What is happening?',
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              ElevatedButton(
                onPressed: _hasText && !_isSending ? _createActivity : null,
                child: Text('Post'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Future<void> _createActivity() async {
    // TODO: implement posting logic
  }
}

new imports (dart)

1
import 'activity_composer.dart';

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      appBar: AppBar(title: Text('Stream Feeds Tutorial')),
      body: _index == 0
          ? Column(
              children: [
                ActivityComposer(userFeed: userFeed),
                Expanded(
                  child: ActivityListView(
                    client: client,
                    feed: timelineFeed,
                    onFollow: onFollow,
                    onUnfollow: onUnfollow,
                  ),
                ),
              ],
            )
          : Placeholder(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Explore'),
        ],
        currentIndex: _index,
        onTap: (index) => setState(() => _index = index),
      ),
    );
  }

With the UI ready, we can implement the posting logic in the ActivityComposer. To do that, we just need to replace the _createActivity function stub with the actual implementation:

activity_composer.dart (dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  Future<void> _createActivity() async {
    setState(() => _isSending = true);
    await widget.userFeed.addActivity(
      request: FeedAddActivityRequest(
        feeds: [widget.userFeed.fid.toString()],
        type: 'post',
        text: _controller.text,
      ),
    );
    _controller.clear();
    setState(() {
      _isSending = false;
    });
  }

Go ahead and post something! It'll automatically appear on your timeline.

Explore Page

The "Explore" page uses the foryou feed to explore new content by showing popular activities.

Just like we did for other feeds, we are going to add an exploreFeed to _MyHomePageState and initialize it accordingly in the loadFeeds function:

main.dart (dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  Future<void> _loadFeeds() async {
    userFeed = client.feedFromId(FeedId.user(userId));
    await userFeed.getOrCreate();

    timelineFeed = client.feedFromId(FeedId.timeline(userId));
    await timelineFeed.getOrCreate();

    final followsSelf = timelineFeed.state.following.any(
      (follow) => follow.targetFeed.fid == userFeed.fid,
    );

    if (!followsSelf) {
      await timelineFeed.follow(targetFid: userFeed.fid);
    }

    exploreFeed = client.feedFromId(FeedId(group: 'foryou', id: userId));
    await exploreFeed.getOrCreate();
    setState(() {
      isLoading = false;
    });
  }

  @override
  void dispose() {
    userFeed.dispose();
    timelineFeed.dispose();
    exploreFeed.dispose();
    super.dispose();
  }

Now we're ready to implement the "Explore" page UI. The layout is similar to Home tab, except that we're not adding the activity composer:

main.dart (dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      appBar: AppBar(title: Text('Stream Feeds Tutorial')),
      body: _index == 0
          ? Column(
              children: [
                ActivityComposer(userFeed: userFeed),
                Expanded(
                  child: ActivityListView(
                    client: client,
                    feed: timelineFeed,
                    onFollow: onFollow,
                    onUnfollow: onUnfollow,
                  ),
                ),
              ],
            )
          : ActivityListView(
              client: client,
              feed: exploreFeed,
              onFollow: onFollow,
              onUnfollow: onUnfollow,
            ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Explore'),
        ],
        currentIndex: _index,
        onTap: (index) => setState(() => _index = index),
      ),
    );
  }

Note that the foryou feed uses the "popular" activity selector, which doesn't support real-time updates. The documentation details how real-time updates work.

In the next step, we're adding a follow button, so we can follow users from the foryou page.

Follow and Unfollow

To implement following and unfollowing feeds we're:

Performing the actual follow/unfollow operation in main.dart
Extending the ActivityItem component by adding the follow/unfollow button

main.dart

activity_item.dart

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
  Future<void> onFollow(FeedId value) async {
    await timelineFeed.follow(targetFid: value);
        // Ensure the feeds are up to date after follow/unfollow
    await timelineFeed.getOrCreate();
    await exploreFeed.getOrCreate();
  }

  Future<void> onUnfollow(FeedId value) async {
    await timelineFeed.unfollow(targetFid: value);
        // Ensure the feeds are up to date after follow/unfollow
    await timelineFeed.getOrCreate();
    await exploreFeed.getOrCreate();
  }

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import 'package:flutter/material.dart';
import 'package:stream_feeds/stream_feeds.dart';

class ActivityItem extends StatelessWidget {
  const ActivityItem({
    super.key,
    required this.currentUserId,
    required this.activity,
    required this.onFollow,
    required this.onUnfollow,
    required this.onCommentPressed,
    required this.onLikePressed,
  });

  final String currentUserId;
  final ActivityData activity;
  final ValueSetter<FeedId> onFollow;
  final ValueSetter<FeedId> onUnfollow;
  final VoidCallback onCommentPressed;
  final VoidCallback onLikePressed;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 4),
              child: CircleAvatar(
                child: Text(activity.user.name?[0].toUpperCase() ?? ''),
              ),
            ),
            SizedBox(width: 8),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,

                children: [
                  ActivityHeader(
                    currentUserId: currentUserId,
                    activity: activity,
                    onFollow: onFollow,
                    onUnfollow: onUnfollow,
                  ),
                  Text(activity.text ?? ''),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ActivityHeader extends StatelessWidget {
  const ActivityHeader({
    super.key,
    required this.currentUserId,
    required this.activity,
    required this.onFollow,
    required this.onUnfollow,
  });

  final String currentUserId;
  final ActivityData activity;
  final ValueSetter<FeedId> onFollow;
  final ValueSetter<FeedId> onUnfollow;

  @override
  Widget build(BuildContext context) {
    final isFollowing = activity.currentFeed?.ownFollows?.isNotEmpty ?? false;

    return Row(
      children: [
        Expanded(
          child: Text(
            activity.user.name ?? '',
            style: Theme.of(context).textTheme.titleMedium,
          ),
        ),
        if (!isFollowing && activity.user.id != currentUserId)
          TextButton(
            onPressed: () => onFollow(activity.currentFeed!.fid),
            child: Text('Follow', style: TextStyle(color: Colors.green)),
          ),
        if (isFollowing && activity.user.id != currentUserId)
          TextButton(
            onPressed: () => onUnfollow(activity.currentFeed!.fid),
            child: Text('Unfollow', style: TextStyle(color: Colors.red)),
          ),
      ],
    );
  }
}

Let's walk through the steps:

feed.follow and feed.unfollow let us follow/unfollow feeds.
To immediately see the results of the follow/unfollow, we're reloading the feeds with getOrCreate.
We're using activity.currentFeed.ownFollows to know if the user's timeline feed follows the feed or not.
- activity.currentFeed has information about the feed the activity was posted to. It's useful if you're building Reddit-style applications where there is no 1:1 mapping between feeds and users. It lets you display name/image of the feed the activity belongs to.
The Stream API also supports follow requests where approval from the feed owner is required to follow

Now that the follow button is working, you can start following other users using the "Explore" page.

Reactions

To make our application more interactive, we'll add reactions for activities.

To achieve this, we'll follow the same approach we used for the follow button:

Implementing the "like" operation in activity_list_view.dart
Extend the ActivityItem component by adding the button to toggle a "like" reaction

activity_list_view.dart

activity_item.dart

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        return ListView(
          children: [
            ...state.activities.map(
              (activity) => ActivityItem(
                currentUserId: client.user.id,
                activity: activity,
                onFollow: onFollow,
                onUnfollow: onUnfollow,
                onCommentPressed: () {},
                onLikePressed: () {
                  if (activity.ownReactions.isEmpty) {
                    feed.addActivityReaction(
                      activityId: activity.id,
                      request: AddReactionRequest(type: 'like'),
                    );
                  } else {
                    feed.deleteActivityReaction(
                      activityId: activity.id,
                      type: 'like',
                    );
                  }
                },
              ),
            ),
            if (feed.state.canLoadMoreActivities)
              TextButton(
                onPressed: () => feed.queryMoreActivities(),
                child: Text('Load more'),
              ),
          ],
        );

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 4),
              child: CircleAvatar(
                child: Text(activity.user.name?[0].toUpperCase() ?? ''),
              ),
            ),
            SizedBox(width: 8),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ActivityHeader(
                    currentUserId: currentUserId,
                    activity: activity,
                    onFollow: onFollow,
                    onUnfollow: onUnfollow,
                  ),
                  Text(activity.text ?? ''),
                  Row(
                    children: [
                      TextButton.icon(
                        onPressed: onLikePressed,
                        icon: Icon(Icons.favorite),
                        label: Text(
                          '${activity.reactionGroups["like"]?.count ?? 0}',
                        ),
                        style: TextButton.styleFrom(
                          foregroundColor: activity.ownReactions.isEmpty
                              ? Colors.black54
                              : Colors.red,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

You can use the demo app to follow your tutorial user, and to react to their activities.

Let's do a recap of this step:

We used client.addActivityReaction and client.deleteActivityReaction to toggle reactions
- We used "like" as reaction type, but it can be any string you'd like
- Since the Flutter SDK provides reactive state management, the UI is automatically updated anytime anything on the activity changes
We use activity.ownReactions and activity.reactionGroups to get real-time reaction data for the activity
Some advanced features not shown in the tutorial:
- A single user can add multiple reactions to an activity
- Comments can have reactions too
- Check out the activity reactions and comment reactions pages in the documentation for more information

Comments

Comments are another good way to add interactivity to an app. To add this feature to the tutorial project we need to:

Implement CommentsPage and the components to display and post comments
Implement CommentComposer to post comments
Extend the ActivityItem component with a button to navigate to the comments screen
Extend the ActivityListView component to implement the navigation.

comments_page.dart

comments_composer.dart

activity_item.dart

activity_list_view.dart

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:stream_feeds/stream_feeds.dart';

import 'comment_composer.dart';

class CommentsPage extends StatefulWidget {
  static MaterialPageRoute<void> route(
    StreamFeedsClient client,
    String activityId,
    FeedId feedId,
  ) {
    return MaterialPageRoute(
      builder: (context) =>
          CommentsPage(client: client, activityId: activityId, feedId: feedId),
    );
  }

  const CommentsPage({
    super.key,
    required this.client,
    required this.activityId,
    required this.feedId,
  });

  final StreamFeedsClient client;
  final String activityId;
  final FeedId feedId;

  @override
  State<CommentsPage> createState() => _CommentsPageState();
}

class _CommentsPageState extends State<CommentsPage> {
  late Activity activity;
  @override
  void initState() {
    super.initState();
    _loadActivity();
  }

  @override
  void didUpdateWidget(covariant CommentsPage oldWidget) {
    if (oldWidget.activityId != widget.activityId) {
      activity.dispose();
      _loadActivity();
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    activity.dispose();
    super.dispose();
  }

  Future<void> _loadActivity() async {
    activity = widget.client.activity(
      activityId: widget.activityId,
      fid: widget.feedId,
    );
    await activity.get();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Feeds Tutorial')),
      body: Column(
        children: [
          Expanded(
            child: StateNotifierBuilder(
              stateNotifier: activity.notifier,
              builder: (context, state, child) {
                if (state.comments.isEmpty) {
                  return Center(child: Text('No comments yet'));
                }

                return ListView(
                  children: [
                    ...state.comments.map(
                      (comment) => CommentItem(comment: comment),
                    ),
                    if (activity.state.canLoadMoreComments)
                      TextButton(
                        onPressed: () => activity.queryMoreComments(),
                        child: Text('Load more'),
                      ),
                  ],
                );
              },
            ),
          ),
          CommentComposer(activity: activity),
        ],
      ),
    );
  }
}

class CommentItem extends StatelessWidget {
  const CommentItem({super.key, required this.comment});

  final CommentData comment;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              comment.user.name ?? '',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(comment.text ?? ''),
          ],
        ),
      ),
    );
  }
}

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import 'package:flutter/material.dart';
import 'package:stream_feeds/stream_feeds.dart';

class CommentComposer extends StatefulWidget {
  const CommentComposer({super.key, required this.activity});

  final Activity activity;

  @override
  State<CommentComposer> createState() => _CommentComposerState();
}

class _CommentComposerState extends State<CommentComposer> {
  final TextEditingController _controller = TextEditingController();
  bool _hasText = false;
  bool _isSending = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final hasText = _controller.text.trim().isNotEmpty;
      if (_hasText != hasText) {
        setState(() => _hasText = hasText);
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: EdgeInsets.all(8),
        child: TextField(
          controller: _controller,
          decoration: InputDecoration(
            hintText: 'Write a comment...',
            border: OutlineInputBorder(),
            suffixIcon: IconButton(
              onPressed: _hasText && !_isSending ? _createComment : null,
              icon: Icon(Icons.send),
              color: Theme.of(context).colorScheme.primary,
              disabledColor: Colors.grey,
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _createComment() async {
    await widget.activity.addComment(
      request: ActivityAddCommentRequest(
        comment: _controller.text,
        activityId: widget.activity.activityId,
      ),
    );
    _controller.clear();
  }
}

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
                  Row(
                    children: [
                      TextButton.icon(
                        onPressed: onCommentPressed,
                        icon: Icon(Icons.comment),
                        label: Text(activity.commentCount.toString()),
                        style: TextButton.styleFrom(
                          foregroundColor: Colors.black54,
                        ),
                      ),
                      TextButton.icon(
                        onPressed: onLikePressed,
                        icon: Icon(Icons.favorite),
                        label: Text(
                          '${activity.reactionGroups["like"]?.count ?? 0}',
                        ),
                        style: TextButton.styleFrom(
                          foregroundColor: activity.ownReactions.isEmpty
                              ? Colors.black54
                              : Colors.red,
                        ),
                      ),
                    ],
                  ),

new imports (dart)

1
import 'comments_page.dart';

dart

1
2
3
4
5
                  onCommentPressed: () {
                    Navigator.of(
                      context,
                    ).push(CommentsPage.route(client, activity.id, feed.fid));
                  },

Let's recap what happened in this step:

We instantiated an Activity object using client.activity and called .get() to load the activity data, including the comments
- Notice this is very similar to what we did for Feed objects
We posted new comments by calling activity.addComment
We use activity.commentCount to display the total number of comments on an activity

Comments can be threaded/nested too (not shown in the tutorial).

Posting Images

Stream API allows attaching files to activities and comments. Let's extend our app with attaching images to activities. To achieve this we need to:

Extend the ActivityComposer component to let users pick an image to attach and display a preview
Update the activity posting logic to include the attachment
Extend the Activity component to display the attachment

activity_composer.dart

activity_item.dart

new imports (dart)

1
2
3
import 'dart:io';

import 'package:image_picker/image_picker.dart';

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
class _ActivityComposerState extends State<ActivityComposer> {
  final TextEditingController _controller = TextEditingController();
  StreamAttachment? _attachment;
  bool _hasText = false;
  bool _isSending = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final hasText = _controller.text.trim().isNotEmpty;
      if (_hasText != hasText) {
        setState(() => _hasText = hasText);
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'What is happening?',
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 8),
          if (_attachment != null)
            Image.file(File(_attachment!.file.path), height: 100, width: 100),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              IconButton(
                onPressed: () {
                  _pickImage();
                },
                icon: Icon(Icons.image_outlined),
              ),
              SizedBox(width: 8),
              ElevatedButton(
                onPressed: _hasText && !_isSending ? _createActivity : null,
                child: Text('Post'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Future<void> _createActivity() async {
    setState(() => _isSending = true);
    await widget.userFeed.addActivity(
      request: FeedAddActivityRequest(
        feeds: [widget.userFeed.fid.toString()],
        type: 'post',
        text: _controller.text,
        attachmentUploads: _attachment != null ? [_attachment!] : null,
      ),
    );
    _controller.clear();
    setState(() {
      _attachment = null;
      _isSending = false;
    });
  }

  Future<void> _pickImage() async {
    final image = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (image != null) {
      final attachment = StreamAttachment(
        type: AttachmentType.image,
        file: AttachmentFile.fromXFile(image),
      );
      setState(() => _attachment = attachment);
    }
  }
}

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
                  ActivityHeader(
                    currentUserId: currentUserId,
                    activity: activity,
                    onFollow: onFollow,
                    onUnfollow: onUnfollow,
                  ),
                  Text(activity.text ?? ''),
                  ...activity.attachments
                      .where((attachment) => attachment.imageUrl != null)
                      .map(
                        (attachment) => Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(16),
                            image: DecorationImage(
                              image: NetworkImage(attachment.imageUrl!),
                              fit: BoxFit.cover,
                            ),
                          ),
                          constraints: BoxConstraints(
                            maxHeight: MediaQuery.of(context).size.width * 0.5,
                            minWidth: double.infinity,
                          ),
                        ),
                      ),

Go ahead and post an image! Or send an image URL, as the Stream API can automatically attach URL metadata as an attachment.

Final Thoughts

In this tutorial, we built a fully-functioning Flutter activity feed application with Stream's Activity Feed V3 SDK. We showed how easy it is to:

Set up a simple activity feed application and connect it to Stream's Activity Feed V3 SDK.
Create user and timeline feeds.
Add activities, reactions and comments.
Explore new content with "For you" feed.

Even though this was a long tutorial, Activity Feed V3 has even more features:

Activity selectors and ranking for customizing what content to show for users
Activity processors for extracting topics from activity content
Notification feeds (with aggregation)
Story feed (activity expiration)
Custom feed groups
Feed and activity visibility including premium activities with feed memberships
Moderation and fine-grained permission system
Polls
For more examples, checkout the stream-feeds-flutter repository

Flutter Activity Feed Tutorial

Project Setup and Installation

Connect to the Stream API

Creating Feeds

Activity List

Activity Composer

Explore Page

Follow and Unfollow

Reactions

Comments

Posting Images

Final Thoughts

Give us feedback!

Start coding