# Mobile App UI

## Overview

This guide explains how to build user interfaces for DIGIT using Flutter. It focuses on simple concepts, standard patterns, and reusable components so developers can quickly create consistent, scalable UI modules.

DIGIT uses Flutter because it allows us to build fast, responsive, cross-platform apps with a single codebase. The UI architecture follows a clean, layered pattern to separate **UI**, **business logic**, and **data access**.

**Key principles:**

* Use standard DIGIT UI components wherever possible.
* Follow a consistent project structure.
* Keep UI code simple — business logic stays in view-models.
* Reuse common services such as localisation, user management, and networking.

## Steps

{% stepper %}
{% step %}

### Set Up Your Environment

* Install Flutter and Dart - stable channel recommended
* Configure an IDE like Android Studio or VS Code
* Install required extensions - Dart, Flutter
* Run `flutter doctor` to confirm the setup
  {% endstep %}

{% step %}

### **Clone the Repository**

After setting up your development environment, you can run the **works\_shg\_app** on your local device. The **works\_shg\_app**  here is used for example purposes only. 

Run the following command:

```
git clone https://github.com/egovernments/DIGIT-Works.git
```

{% endstep %}

{% step %}

### Add the `.env` File

Inside the project folder `frontend/works_shg_app`, create a `.env` file.

Add the below sample config:

```
BASE_URL='https://works-dev.digit.org/'
MDMS_API_PATH='egov-mds-service/v1/_search'
GLOBAL_ASSETS='https://works-dev.digit.org/works-dev-asset/worksGlobalConfig.json'
ENV_NAME="DEV"
```

{% endstep %}

{% step %}

### Install Dependencies

Open your terminal and go to the project folder:

```
frontend/works_shg_app
```

Run:

```
flutter clean      // clears old build cache
flutter pub get    // downloads all dependencies
```

{% endstep %}

{% step %}

### Run the App

Connect a device or start an emulator/browser, then run:

```
flutter run
```

This starts the application locally.
{% endstep %}

{% step %}

### Use Flutter DevTools

A link will appear in your terminal. Open it to access debugging and performance tools.
{% endstep %}
{% endstepper %}