osmos_flutter_plugin 2.3.0

osmos_flutter_plugin: ^2.3.0 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:osmos_flutter_plugin/core/osmos_sdk.dart';
import 'examples/banner_ad_example.dart';
import 'examples/carousel_ad_example.dart';
import 'examples/interstitial_ad_example.dart';
import 'examples/pda_ad_example.dart';
import 'examples/pip_ad_example.dart';
import 'examples/slider_ad_example.dart';

/// OSMOS Flutter Plugin Example App
///
/// This example app demonstrates how to integrate and use all available
/// ad formats from the OSMOS SDK in your Flutter application.
///
/// IMPORTANT: Before running this app, you must:
/// 1. Replace ALL placeholder values (YOUR_CLIENT_ID, YOUR_DISPLAY_ADS_HOST, etc.)
///    with your actual OSMOS configuration values from your OSMOS dashboard
/// 2. Update cliUbid, pageType, and adUnit in each example file
///    (banner_ad_example.dart, carousel_ad_example.dart, etc.)
/// 3. Ensure you have the necessary permissions in AndroidManifest.xml and Info.plist
/// 4. Test on both Android and iOS devices/emulators
///
/// The app will NOT work until you replace the placeholder values with your actual credentials.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // IMPORTANT: Replace these placeholder values with your actual OSMOS configuration
  await OsmosSDK
      .clientId("YOUR_CLIENT_ID") // Replace with your actual client ID from OSMOS dashboard
      .debug(true) // Set to false in production
      .productAdsHost("YOUR_PRODUCT_ADS_HOST") // Replace with your product ads host
      .displayAdsHost("YOUR_DISPLAY_ADS_HOST") // Replace with your display ads host
      .eventTrackingHost("YOUR_EVENT_TRACKING_HOST") // Replace with your event tracking host
      .buildGlobalInstance();

  runApp(const OsmosExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OSMOS SDK Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const AdFormatsListPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('OSMOS SDK - Ad Formats'),
        elevation: 2,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildWelcomeCard(),
          const SizedBox(height: 24),
          _buildSectionTitle('Display Ad Formats'),
          _buildAdFormatCard(
            context,
            icon: Icons.image,
            title: 'Banner Ads',
            description: 'Static image and video banner advertisements',
            page: const BannerAdExample(),
          ),
          _buildAdFormatCard(
            context,
            icon: Icons.view_carousel,
            title: 'Carousel Ads',
            description: 'Swipeable carousel of multiple ad cards',
            page: const CarouselAdExample(),
          ),
          _buildAdFormatCard(
            context,
            icon: Icons.fullscreen,
            title: 'Interstitial Ads',
            description: 'Full-screen ads displayed at natural breaks',
            page: const InterstitialAdExample(),
          ),
          _buildAdFormatCard(
            context,
            icon: Icons.picture_in_picture,
            title: 'PIP Ads',
            description: 'Picture-in-picture floating video ads',
            page: const PipAdExample(),
          ),
          _buildAdFormatCard(
            context,
            icon: Icons.slideshow,
            title: 'Slider Ads',
            description: 'Bottom slider ads with auto-show capability',
            page: const SliderAdExample(),
          ),
          const SizedBox(height: 16),
          _buildSectionTitle('Product Ad Formats'),
          _buildAdFormatCard(
            context,
            icon: Icons.shopping_bag,
            title: 'PDA (Product Display Ads)',
            description: 'Display product listings with banner/video and recommended products',
            page: const PdaAdExample(),
          ),
        ],
      ),
    );
  }

  Widget _buildWelcomeCard() {
    return Column(
      children: [
        // Configuration Warning Card
        Card(
          color: Colors.orange.shade50,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(Icons.warning_amber_rounded, color: Colors.orange.shade700),
                    const SizedBox(width: 8),
                    Text(
                      'Configuration Required',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Colors.orange.shade700,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                const Text(
                  'IMPORTANT: This app uses placeholder values. To make it work:\n\n'
                  '1. Replace YOUR_CLIENT_ID, YOUR_DISPLAY_ADS_HOST, etc. in lib/main.dart\n'
                  '2. Update YOUR_USER_ID, YOUR_PAGE_TYPE, and YOUR_AD_UNIT in each example file\n'
                  '3. Get actual values from your OSMOS dashboard at osmos.ai\n\n'
                  'The app will not fetch real ads until you configure it with your credentials.',
                  style: TextStyle(fontSize: 13, height: 1.5),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),
        // Welcome Card
        Card(
          color: Colors.blue.shade50,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(Icons.info_outline, color: Colors.blue.shade700),
                    const SizedBox(width: 8),
                    Text(
                      'Welcome to OSMOS SDK',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.blue.shade700,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                const Text(
                  'This example app demonstrates all available ad formats. '
                  'Tap on any format below to see a working example with code snippets.',
                  style: TextStyle(fontSize: 14, height: 1.4),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12, top: 8),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
      ),
    );
  }

  Widget _buildAdFormatCard(
    BuildContext context, {
    required IconData icon,
    required String title,
    required String description,
    required Widget page,
  }) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: ListTile(
        contentPadding: const EdgeInsets.all(16),
        leading: Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.blue.shade100,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(icon, color: Colors.blue.shade700, size: 28),
        ),
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(top: 8),
          child: Text(
            description,
            style: TextStyle(
              fontSize: 13,
              color: Colors.grey.shade600,
            ),
          ),
        ),
        trailing: const Icon(Icons.arrow_forward_ios, size: 16),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => page),
          );
        },
      ),
    );
  }
}