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

1

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

2

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

3

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"

4

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

5

Run the App

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

flutter run

This starts the application locally.

6

Use Flutter DevTools

A link will appear in your terminal. Open it to access debugging and performance tools.