Questera AI
  • Getting Started
    • Get Started with Questera AI
      • Overview of Questera
      • Why Choose Questera ?
      • Key Features & Benefits
      • How does it work?
    • Use Cases
      • Ecommerce & Retail
      • Saas
      • Subscriptions
  • Questera AI Platform
    • Data
      • Connect Data & Models
        • Data Ingestion
          • Snowflake
          • Amazon Redshift
          • Google BigQuery
          • Microsoft Azure
          • CSV
          • ESP (Email Service Provider)
          • CRM
        • Configure Models
          • Open AI
          • Gemini
      • Track & Measurements
        • Events
        • User Attributes
        • Counters
        • Metrics
        • Webhooks & Alerts
        • Feature Flags
    • Campaigns
    • AI Audience Segments
    • Page
    • AI Variants
    • AI Flows
    • AI Agents
      • What are AI Agents?
      • Types of AI Agents
        • ELMA - Email Lifecycle Marketing Agent
        • GRETA - Growth Engineering Agent
        • SEGA - Intelligent Segmentation Agent
        • OMNIA - Omni-Channel Journey Creator Agent
        • GIA - Data Analysis & Graphical Interpretation Agent
        • SARA - Smart Ads Retargeting Agent
        • BECCA - Personalized Email Content Agent
        • LEXA - Language Optimization Agent
    • Analytics & Reporting
    • Playground
      • Simulating User Interactions.
        • Test and Run Campaigns
    • Dataset
      • Connecting an external data source
      • Uploading your own file
  • Questera AI SDKs
    • SDK Component Categories
      • Onboarding
      • Engagement
      • User Assistance
      • Expansion
      • Miscellaneous
    • All Components
      • Onboarding
        • Onboarding Quiz
        • Login Component
      • Gamified Engagement
        • Rewards & Loyalty Component
        • Challenges
        • Leaderboard
        • Badges
        • Spin The Wheel
        • Scratch The Card
        • Gamified Quiz
        • Streaks
        • Dynamic Membership
      • Education
        • User Guides
        • Tooltips
        • AI Help Hub & Assistant
      • Popups
        • Special Offers
        • Upsells & Cross Sells
        • Product Recommendations
        • Celebrations
        • Alerts
      • AI Search
      • User Feedback
      • Surveys
      • Referrals
      • Banners
      • Pricing & Payments
      • Embedded Analytics
    • React SDK Components
      • Onboarding
        • Onboarding Component
        • Get Started Component
        • Tutorial/Quest List Component
        • Walk Through Component
      • Gamification
        • Challenges Component
        • DailyStreak Component
        • Leaderboard Component
        • GamifiedQuiz component
      • User Assistance
        • Feedback Workflow Component
        • Inline Feedback Component
        • Survey Component
        • Search Bar Component
        • Help Hub Component
        • CreditsPopup Component
      • Expansion
        • Referral Components
        • Cross-Selling Component
      • Miscellaneous
        • Confetti Component
        • Alert Component
        • Login Component
        • One to one Survey Component
        • Pricing & Payment Component
        • Badge Component
        • Toast Service
      • Survey
        • User Experience Feedback Survey
        • Feature Usage Survey
        • Customer Satisfaction Surveyy
        • Net Promoter Score
        • Onboarding Experience Survey
        • Customer Support Satisfaction Survey
      • Embedded Analytics
        • Line Chart
        • Scatter Chart
        • Combo Bar/Line
        • Stacked Bar Chart
        • Horizontal Bar Chart
        • Stepped Line Chart
        • Pie chart
        • Doughnut Chart
        • Multi Series Pie
        • Bubble Chart
        • Floating Bar Chart
    • React Native SDK Components
      • Onboarding
        • Embedded Onboarding ToolTip
        • Announcement Banners
        • Onboarding Component
        • Get Started Component
        • Quest List Component
      • Gamification
        • Challenges Component
        • Daily Streak Component
        • Leaderboard Component
        • Quiz component
      • User Assistance
        • HelpHub
        • Feedback Workflow Component
        • General Feedback Component
        • Inline Feedback Component
        • Credits Popup Component
      • Expansion
        • Cross-Selling
        • Share With friends
        • Referral
      • Miscellaneous
        • Spotlight Searc
        • Modal
        • Login Component
        • Membership Card
        • Badges
        • Pricing
        • Survey Form
        • Banner
        • Carousel
        • Tutorial
        • Daily Check-in Credit
    • No Code SDK Components
      • HelpHub
      • Feedback Workflow Component
    • Flutter SDK Components
      • Onboarding
        • Onboarding Quiz - Multi page Component
        • Onboarding Quiz - Single page Component
        • Get Started Component
        • Tutorial/Quest List Component
      • User Assistance
        • Feedback Workflow
        • Help Hub Component
        • Inline Feedback Component
        • Spotlight Search Component
        • Survey component
      • Gamification
        • Daily Streak Component
        • Leaderboard Component
        • Gamified Quiz Component
      • Expansion
        • Referral Component
        • Cross-Selling Component
      • General Components
        • Login Component
    • Rest APIs
      • Data Module
        • Data Object
      • Entity Module
        • Entity Object
      • User Module
        • User Object
      • Gamification
        • Badge Object
        • Web3 Module
          • Dynamic NFT Object
        • Skills Module
          • Skills Object
        • Levels Module
          • Levels Object
  • Integrations
    • Email
      • Mailchimp
      • Klaviyo
      • Mailmodo
      • Mailjet
      • Brevo (SendInBlue)
      • Constant Contact
      • Elastic Email
      • ApolloIo
      • Google OAuth
      • Instantly
      • Loops
      • AWS SES
      • SendGrid
      • Hubspot
      • Activecampaign
      • One Signal
      • Attio
    • Customer data platforms
      • Segment
      • Shopify
      • Salesforce
    • Workflow automation & ETLs
      • Zapier
    • Analytics & business intelligence
      • Mixpanel
      • Amplitude
      • Heap
      • Posthog
      • Snowflake
      • Google BigQuery
      • Clay
      • Outreach
      • Salesloft
      • Smartlead
    • Data ware house
      • Redshift
      • Microsoft Azure
    • Task management
      • Clickup
      • Jira
    • Engagement Platforms
      • Braze
      • Moengage
      • Iterable
      • Customer.io
    • Segment
      • Overview
      • Sending Data to Segment
      • Sending Data to Questera
    • In-App UI
      • Quest UI SDKs
      • Pendo
      • Appcues
      • Bubble
      • Chameleon
    • FAQ
  • recipes
    • Greta
      • SaaS Subscription
        • Activation
        • Conversion
        • Retention
      • SaaS Credit-Based
        • Activation
        • Conversion
        • Retention
        • Engagement
      • Ed-Tech
        • Activation
        • Conversion
        • Retention
        • Engagement
      • Gaming Apps
        • Activation
        • Conversion
        • Retention
        • Engagement
      • E-Commerce
        • Activation
        • Conversion
        • Retention
    • Elma
      • SaaS Subscription
        • Activation
        • Conversion
        • Retention
        • Engagement
      • SaaS Credit-Based
        • Activation
        • Conversion
        • Retention
        • Engagement
      • E-Commerce
        • Activation
        • Conversion
        • Retention
        • Engagement
  • Quest Tools
    • Saas GPT
    • Playground
    • PLGOS
  • GRETA
    • How to create your first project using Greta?
    • Playground
Powered by GitBook
On this page
  • Components Visuals
  • Installation
  • Props of Login Component
  • Basic Usage:
  1. Questera AI SDKs
  2. Flutter SDK Components
  3. General Components

Login Component

Our login component for Flutter provides a straightforward solution for integrating secure user authentication into your apps. Easily customize the login UI to match your project's requirements .

PreviousGeneral ComponentsNextRest APIs

Last updated 7 months ago

Components Visuals

To unlock early access to the component

Installation

To use the login component, you need to install questlabs_flutter_sdk package into your project

  • First, navigate to the root directory of your Flutter project. Open the pubspec.yaml file using your preferred code editor.

  • Under the dependencies section in your pubspec.yaml file, add the following line to include the questlabs_flutter_sdk package

  • After saving your changes, open your terminal or command prompt and run the following command to fetch the new dependency

dependencies:
  questlabs_flutter_sdk:
    git:
      url: "Replace with your github URL"
      ref: master  
  flutter_bloc: ^8.1.6

Props of Login Component

Prop Name
Type
Description
Required

questProvider

QuestProvider

Provides necessary configuration such as API key, entity ID, and optional theme settings

Yes

apiKey

String

API key to authenticate requests.

Yes

entityId

String

Entity ID associated with the quest.

Yes

themeConfig

QuestThemeConfig

Customizes theme settings like background color, font style, border color, button color, etc.

No

primaryColor

Color

Sets the primary color of the component .

no

secondaryColor

Color

Sets the secondary color of the component .

no

buttonColor

Color

Defines the color of buttons within the component .

no

backgroundColor

Color

Specifies the background color of the component .

no

borderColor

Color

Defines the color of the component's border.

no

fontStyle

String

Sets the font style for text within the component (e.g., "poppins")

no

loginProps

LoginProps

Contains user ID, campaigns ID, token, and display options for the "Login Component"

Yes

userId

String

Unique user identifier.

Yes

token

String

Token for authenticating the user session.

Yes

campaignsId

String

Unique campaigns identifier.

Yes

isSubmitButton

bool

You can choose either to verify the OTP automatically or use a button for manual verification

no

navigationWidget

Widget

After successful OTP submission, the user will be redirected to the specified widget

no

You can customize the UI with the type of QuestThemeConfig would be


          themeConfig: QuestThemeConfig(
              secondaryColor: Colors.red,
              primaryColor: Colors.blue,
              buttonColor: Colors.yellow,
              backgroundColor: Colors.yellow,
              fontStyle: "libre baskerville",
              borderColor: Colors.red
          )

Basic Usage:

  • In your main() function, ensure you initialize the app and dependencies as follows:

void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}
  • Add the following BlocProvider setup to your providers list to initialize the LoginComponentCubit for state management:

providers: [
  BlocProvider(
            create: (context) => getIt<LoginComponentCubit>(),
          ),
],

Ensure you provide your entity ID, API key, token, user ID, and campaigns ID

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:questlabs_flutter_sdk/questlabs_flutter_sdk.dart';

void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => getIt<LoginComponentCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:   LoginComponent(
          questProvider: QuestProvider(
              apiKey: "apiKey",
              entityId: "entityId",
              themeConfig: QuestThemeConfig(
                // secondaryColor: Colors.green,
                // primaryColor: Colors.blue,
                // backgroundColor: Colors.white,
                // buttonColor: Colors.yellow,
                // fontStyle: "dancing script",
                // borderColor: Colors.red
              )
          ),
          loginProps: LoginProps(
            userId:  "userId",
            campaignsId: "campaignsId",
            token: "token",
            // isSubmitButton: true,
            // navigationWidget: const ShareWithComponentTest(),

          ),

        )
      ),
    );
  }
}


Watch the video below for a step-by-step guide on testing the Login component in your Flutter project.

Get Access