Chat - Part 2

Chat - Part 2 #

Supabase got another tutorial for this.

Before you start you should go to the Table Editor in Supabase dashboard and delete any rows in the messages table. Otherwise, you will get: ERROR: 23502: column "room_id" of relation "messages" contains null values.

Follow the Flutter Authorization with RLS tutorial.

There are some corrections listed below.

Install additional dependencies #

Change the dependencies to the current version.

flutter_bloc: ^8.1.5

Here are the paths for setting up deep links.

  • iOS ios/Runner/Info.plist
  • Android android/app/src/main/AndroidManifest.xml

Deep links are a way to link to something within an app. The platform (iOS/Android) needs to know that a link resolves to our app. This way we configure deeps links is inherently platform specific.

Missing code #

Complete set of code of this chat app

There are a couple of code snippets missing from the tutorial. They are listed here:

lib/components/user_avatar.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:my_chat_app/cubits/profiles/profiles_cubit.dart';
import 'package:my_chat_app/utils/constants.dart';

/// Widget that will display a user's avatar
class UserAvatar extends StatelessWidget {
  const UserAvatar({
    Key? key,
    required this.userId,
  }) : super(key: key);

  final String userId;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ProfilesCubit, ProfilesState>(
      builder: (context, state) {
        if (state is ProfilesLoaded) {
          final user = state.profiles[userId];
          return CircleAvatar(
            child:
                user == null ? preloader : Text(user.username.substring(0, 2)),
          );
        } else {
          return const CircleAvatar(child: preloader);
        }
      },
    );
  }
}

Add spacer to lib/utils/constants.dart:

/// Simple sized box to space out form elements
const spacer = SizedBox(width: 16, height: 16);

In lib/pages/splash_page.dart replace:

final session = await SupabaseAuth.instance.initialSession;

With:

final session = supabase.auth.currentSession;

Replace lib/models/message.dart with this.

Confirm email #

Want to try out the deep link from confirmation email?

Go to Supabase dashboard > Authentication > Providers > Auth Providers > Email and enable “Confirm email”.

December 11, 2024