# 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

{% tabs %}
{% tab title="Flutter" %}
Add the SDK to your `pubspec.yaml`:

**Using Flutter CLI:**

```bash
flutter pub add digia_ui
```

**Manual:**

```yaml
dependencies:
  digia_ui: ^1.0.0
```

{% endtab %}

{% tab title="Android (Jetpack Compose)" %}
**Step 1: Add JitPack Repository** Add this to your `settings.gradle.kts`:

```kotlin
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`:

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

{% endtab %}
{% endtabs %}

***

## 2. Get Your Access Key

1. Log in to [Digia Studio](https://app.digia.tech).
2. Open your project.
3. Go to **Settings** → **App Settings**.
4. Copy your **Access Key**.

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

***

## 3. Initialization

Initialize the SDK early in your app lifecycle.

{% tabs %}
{% tab title="Flutter" %}
The Flutter SDK offers two initialization approaches:

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

```dart
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.

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

{% endtab %}

{% tab title="Android (Jetpack Compose)" %}
Initialize the SDK in your `Application` class or main `Activity`.

```kotlin
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()
            }
        }
    }
}
```

{% endtab %}
{% endtabs %}

***

## 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.

{% tabs %}
{% tab title="Flutter" %}

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

{% endtab %}

{% tab title="Android (Jetpack Compose)" %}

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

{% endtab %}
{% endtabs %}

### Pattern 2: Hybrid Mode

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

{% tabs %}
{% tab title="Flutter" %}

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

{% endtab %}

{% tab title="Android (Jetpack Compose)" %}

```kotlin
// 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")
    )
}
```

{% endtab %}
{% endtabs %}

### Pattern 3: Component Embedding

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

{% tabs %}
{% tab title="Flutter" %}

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

{% endtab %}

{% tab title="Android (Jetpack Compose)" %}

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

{% endtab %}
{% endtabs %}

***

## Next Steps

* [**Understanding Flavors**](https://docs.digia.tech/sdk-integration/sdk-integration/understanding-flavors) — Learn how to manage Dev vs Prod environments.
* [**Advanced Integration**](https://docs.digia.tech/sdk-integration/sdk-integration/advanced-integration) — Register custom widgets and set up analytics.