supa_architecture 0.0.2+preview.7

A comprehensive set of tools and utilities designed to streamline the development of Flutter applications.

example/example.md

Example Documentation for main.dart

This documentation provides a detailed walkthrough of the main.dart example using the supa_architecture package. The example demonstrates initializing the application, setting up environment variables, configuring Sentry for error tracking, and integrating ReCAPTCHA and Toastification.

Table of Contents

• Example Documentation for main.dart
  • Table of Contents
  • Prerequisites
  • Overview
  • Step-by-Step Guide
    • Initialize the Application
    • Load Environment Variables
    • Setup ReCAPTCHA
    • Initialize Authentication
    • Configure Sentry
    • Setup Bloc Providers and Toastification
    • Build the Application
  • Conclusion

Prerequisites

Before running this example, ensure you have the following prerequisites:

• Flutter SDK installed
• Environment variables file (.env) configured with the following keys:
  • GOOGLE_RECAPTCHA_ANDROID_KEY
  • GOOGLE_RECAPTCHA_IOS_KEY
  • SENTRY_DSN

Overview

This example demonstrates the following:

• Initializing the Flutter application with SupaApplication.
• Loading environment variables using flutter_dotenv.
• Setting up ReCAPTCHA using the RecaptchaConfig class.
• Initializing and configuring Sentry for error tracking.
• Using MultiBlocProvider to manage state with BLoC.
• Displaying Toastification notifications.
• Conditionally displaying content based on authentication state.

Step-by-Step Guide

Initialize the Application

Start by initializing Flutter bindings and the SupaApplication.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await dotenv.load();
  
  await SupaApplication.initialize();

Load Environment Variables

Load the environment variables from the .env file.

await dotenv.load();

Setup ReCAPTCHA

Initialize ReCAPTCHA configuration based on the platform (Android or iOS).

SupaApplication.initCaptcha(
  captchaConfig: RecaptchaConfig(
    siteKey: Platform.isAndroid
        ? dotenv.env['GOOGLE_RECAPTCHA_ANDROID_KEY']!
        : dotenv.env['GOOGLE_RECAPTCHA_IOS_KEY']!,
  ),
);

Initialize Authentication

Initialize the AuthenticationBloc.

GetIt.instance.get<AuthenticationBloc>().handleInitialize();

Configure Sentry

Configure Sentry for error tracking and performance monitoring.

await SentryFlutter.init(
  (options) {
    options.dsn = dotenv.env['SENTRY_DSN'];
    options.tracesSampleRate = 1.0;
    options.profilesSampleRate = 1.0;
  },
  appRunner: () => runApp(MyApp()),
);

Setup Bloc Providers and Toastification

Wrap the main application with ToastificationWrapper and provide the necessary BLoC providers.

ToastificationWrapper(
  child: MultiBlocProvider(
    providers: [
      BlocProvider<AuthenticationBloc>(
        create: (_) => GetIt.instance.get<AuthenticationBloc>(),
      ),
      BlocProvider<TenantBloc>(
        create: (_) => GetIt.instance.get<TenantBloc>(),
      ),
    ],
    child: BlocConsumer<AuthenticationBloc, AuthenticationState>(
      listener: (_, state) {
        // Listener logic here
      },
      builder: (_, state) {
        return MyApp(state: state);
      },
    ),
  ),
);

Build the Application

Define the MyApp widget and build the application UI.

class MyApp extends StatelessWidget {
  final AuthenticationState state;
  
  MyApp({required this.state});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Example for supa_architecture'),
        ),
        body: Center(
          child: Text(
            state.isAuthenticated
                ? 'User is authenticated'
                : 'User is not authenticated',
          ),
        ),
      ),
    );
  }
}

Conclusion

This example demonstrates a complete setup for initializing and running a Flutter application using the supa_architecture package. It covers environment variable loading, ReCAPTCHA setup, Sentry configuration, state management with BLoC, and UI building. By following this guide, you can set up a robust and scalable Flutter application with proper error tracking and state management.