Getting Started

This guide covers everything you need to integrate Digia UI SDK into your mobile app. We support both Flutter (Cross-platform) and Android (Jetpack Compose).

1. Installation

Add the SDK to your pubspec.yaml:

Using Flutter CLI:

flutter pub add digia_ui

Manual:

dependencies:
  digia_ui: ^1.0.0

Step 1: Add JitPack Repository Add this to your settings.gradle.kts:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

Step 2: Add Dependency Add this to your app-level build.gradle.kts:

dependencies {
    implementation("com.github.Digia-Technology-Private-Limited:digia_ui_compose:v1.0.0-beta.1")
}

2. Get Your Access Key

Log in to Digia Studio.
Open your project.
Go to Settings → App Settings.
Copy your Access Key.

⚠️ Security: Never commit your access key to public repositories.

3. Initialization

Initialize the SDK early in your app lifecycle.

The Flutter SDK offers two initialization approaches:

Option A: DigiaUIAppBuilder (Recommended) Handles loading states and errors automatically. Ideal for new apps.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DigiaUIAppBuilder(
      options: DigiaUIOptions(
        accessKey: 'YOUR_ACCESS_KEY',
        flavor: Flavor.debug(environment: Environment.development),
      ),
      builder: (context, status) {
        if (status.isLoading) return CircularProgressIndicator();
        if (status.hasError) return Text('Error: ${status.error}');
        
        return MaterialApp(
          home: DUIFactory().createInitialPage(),
        );
      },
    );
  }
}

Option B: Manual Initialization For complex setups where you need the SDK ready before rendering.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final digiaUI = await DigiaConfig.initialize(); // Custom init logic
  runApp(MyApp(digiaUI: digiaUI));
}

Initialize the SDK in your Application class or main Activity.

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // Initialize on background thread
        CoroutineScope(Dispatchers.IO).launch {
             val digiaUI = DigiaUI.initialize(
                DigiaUIOptions(
                    context = applicationContext,
                    accessKey = "YOUR_PROJECT_ACCESS_KEY",
                    flavor = Flavor.Debug() // Use Flavor.Release() for production
                )
            )
            
            // Initialize global manager & factory
            DigiaUIManager.initialize(digiaUI)
            withContext(Dispatchers.Main) {
                 DUIFactory.getInstance().initialize()
            }
        }
    }
}

4. Integration Patterns

Choose how strictly you want to integrate Digia UI into your app.

Pattern 1: Full App Mode

Best for: Apps built entirely (90%+) in Digia Studio.

MaterialApp(
  home: DUIFactory().createInitialPage(),
  onGenerateRoute: (settings) {
    return DUIFactory().createPageRoute(
      settings.name!,
      settings.arguments as Map<String, dynamic>?,
    );
  },
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Renders the initial page defined in Digia Studio
            DUIFactory.getInstance().CreateInitialPage()
        }
    }
}

Pattern 2: Hybrid Mode

Best for: Existing apps migrating to Digia UI incrementally, or apps with complex native screens.

// Native Flutter screen navigating to Digia UI page
Navigator.push(
  context,
  DUIFactory().createPageRoute('checkout_page', {'cartId': '123'}),
);

// Inside your native Composable
Button(onClick = { navController.navigate("checkout_route") }) {
    Text("Go to Checkout")
}

// In your NavHost
composable("checkout_route") {
    DUIFactory.getInstance().CreatePage(
        pageId = "checkout_page",
        pageArgs = mapOf("cartId" to "123")
    )
}

Pattern 3: Component Embedding

Best for: Using Digia UI for specific sections (like valid lists, cards) inside native screens.

Column(
  children: [
    Text("Native Header"),
    Expanded(
      child: DUIFactory().createComponent('product_list_card', {'id': '123'}),
    ),
  ],
)

LazyColumn {
    items(products) { product ->
        DUIFactory.getInstance().CreateComponent(
            componentId = "product_list_item",
            args = mapOf("product" to product)
        )
    }
}

Next Steps

Understanding Flavors — Learn how to manage Dev vs Prod environments.
Advanced Integration — Register custom widgets and set up analytics.

PreviousMethods of Integration NextAdvanced Integration

Last updated 1 month ago

hashtag1. Installation

hashtag2. Get Your Access Key

hashtag3. Initialization

hashtag4. Integration Patterns

hashtagPattern 1: Full App Mode

hashtagPattern 2: Hybrid Mode

hashtagPattern 3: Component Embedding

hashtagNext Steps