Skip to main content

​
Show Profile Widget

Display the Gameball customer profile widget that contains customer details, available reward campaigns, leaderboard, and more.

​
Basic Usage

import 'package:gameball_flutter/gameball_flutter.dart';
import 'package:flutter/material.dart';

final profileRequest = ShowProfileRequestBuilder()
    .customerId("customer-123")
    .build();

final gameballApp = GameballApp.getInstance();
gameballApp.showProfile(context, profileRequest);

// With session token override
gameballApp.showProfile(context, profileRequest, sessionToken: "custom-token");

​
Request Parameters

​
context
BuildContext
required
The Flutter BuildContext from your widget.
​
customerId
string
required
Unique identifier for the customer whose profile to display.
​
openDetail
string
Specific detail section to open (e.g., “rewards”, “profile”, “achievements”). Opens the main view by default.
​
hideNavigation
bool
Hide the navigation bar in the profile widget. Defaults to false.
​
showCloseButton
bool
Show a close button in the profile widget. Defaults to true.
​
closeButtonColor
string
Close button color in hex format (e.g., “#FF6B6B”). Only applies if showCloseButton is true.
​
widgetUrlPrefix
string
Custom widget URL prefix for advanced widget customization.
​
sessionToken
string
Optional session token to override the global token for this specific request.
In Flutter SDK, passing a sessionToken parameter updates the global token. Pass null to clear, or omit to use the current global token.

​
Validation Rules

ShowProfileRequest requires:
  • customerId cannot be null or empty
  • closeButtonColor must be in hex format (#RRGGBB) if provided

​
Advanced Configuration

​
Open Specific Section

Open a specific section of the profile widget directly: 
final profileRequest = ShowProfileRequestBuilder()
    .customerId("customer-123")
    .openDetail("rewards")  // Open the rewards section
    .build();

gameballApp.showProfile(context, profileRequest);

​
Custom Close Button

Add a custom-styled close button: 
final profileRequest = ShowProfileRequestBuilder()
    .customerId("customer-123")
    .showCloseButton(true)
    .closeButtonColor("#FF6B6B")
    .build();

gameballApp.showProfile(context, profileRequest);

​
Hide Navigation

Display the widget without navigation controls: 
final profileRequest = ShowProfileRequestBuilder()
    .customerId("customer-123")
    .hideNavigation(true)
    .build();

gameballApp.showProfile(context, profileRequest);

​
Custom Widget URL

Use a custom widget URL prefix for advanced configurations: 
final profileRequest = ShowProfileRequestBuilder()
    .customerId("customer-123")
    .widgetUrlPrefix("https://custom.example.com/widget")
    .build();

gameballApp.showProfile(context, profileRequest);

​
Implementation Examples

​
Show Profile Button

Display the profile widget when user clicks a button: 
import 'package:flutter/material.dart';
import 'package:gameball_flutter/gameball_flutter.dart';

class ProfileScreen extends StatelessWidget {
  final String customerId;

  const ProfileScreen({Key? key, required this.customerId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showGameballProfile(context),
          child: Text('View Rewards & Achievements'),
        ),
      ),
    );
  }

  void _showGameballProfile(BuildContext context) {
    final profileRequest = ShowProfileRequestBuilder()
        .customerId(customerId)
        .showCloseButton(true)
        .closeButtonColor("#4CAF50")
        .build();

    GameballApp.getInstance().showProfile(context, profileRequest);
  }
}

​
Bottom Navigation Integration

Integrate with bottom navigation: 
class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });

    if (index == 2) {  // Rewards tab
      final profileRequest = ShowProfileRequestBuilder()
          .customerId("customer-123")
          .build();

      GameballApp.getInstance().showProfile(context, profileRequest);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Shop',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard),
            label: 'Rewards',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    switch (_selectedIndex) {
      case 0:
        return HomeTab();
      case 1:
        return ShopTab();
      default:
        return Container();
    }
  }
}

​
Floating Action Button

Add a rewards button as a floating action button: 
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: YourContentWidget(),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          final profileRequest = ShowProfileRequestBuilder()
              .customerId("customer-123")
              .openDetail("rewards")
              .build();

          GameballApp.getInstance().showProfile(context, profileRequest);
        },
        icon: Icon(Icons.card_giftcard),
        label: Text('My Rewards'),
      ),
    );
  }
}

​
Widget Content

The profile widget displays:

Customer Info

Display name, points balance, tier level, and customer status

Reward Campaigns

Available rewards, challenges, and how to earn them

Leaderboard

Customer ranking, top performers, and competitive standings

Transaction History

Points earned and redeemed history with detailed breakdown
The widget content, design, and branding can be fully customized from your Gameball dashboard.

​
Best Practices

1

Prominent Access

Place the profile widget button in an easily accessible location (e.g., main navigation, profile screen, bottom bar).
2

Badge Indicators

Show badge notifications when customers earn new rewards or achievements to increase engagement.
3

Deep Linking

Use the openDetail parameter to deep link to specific sections based on user context (e.g., open rewards after purchase).
4

Consistent Styling

Match the close button color with your app’s theme using closeButtonColor for a cohesive user experience.
5

Contextual Display

Show the profile widget at relevant moments (after earning points, completing challenges, or when users check their account).
Consider showing the profile widget after a customer earns points to increase engagement and encourage repeat purchases. Users are more likely to interact with the widget when they’ve just been rewarded.
Ensure you’ve initialized the customer with initializeCustomer() before calling showProfile() to guarantee the widget displays accurate customer data.

​
Next Steps