{"id":289,"date":"2025-07-24T11:24:18","date_gmt":"2025-07-24T11:24:18","guid":{"rendered":"https:\/\/documentation.iqonic.design\/prokit-flutter\/?p=289"},"modified":"2025-07-24T11:30:00","modified_gmt":"2025-07-24T11:30:00","slug":"app-structure","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/prokit-flutter\/app-structure\/","title":{"rendered":"App Structure"},"content":{"rendered":"
\n

\ud83d\udd52\u00a0Estimated Reading:<\/strong>\u00a01 minute
\ud83d\udcc2\u00a0Location:<\/strong>\u00a0File Structure \u2192 App Structure<\/p>\n\n\n\n

\u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/p>\n\n\n\n

2\ufe0f\u20e3 App Structure<\/h2>\n\n\n\n

This section explains the folder structure of the KiviCare Flutter App<\/strong>, which is organized to make the development process modular, maintainable, and scalable.<\/p>\n\n\n\n

\ud83d\udcc2 Folder-wise Overview<\/strong><\/h2>\n\n\n\n
Folder \/ File<\/strong><\/th>Purpose \/ Description<\/strong><\/th><\/tr><\/thead>
\ud83d\udcc2 Components\/<\/strong><\/code><\/td>Description:<\/strong> This directory contains all the reusable UI components used in the screens of the application. It allows for modular and organized development, where each screen can have multiple components.
\ud83d\udd39Purpose:<\/strong> Promotes modular code<\/strong> and reusability<\/strong>.
\ud83d\udd38 Example:<\/strong> CustomButton<\/code>, UserCard<\/code>, AppointmentTile<\/code><\/td><\/tr>
\ud83c\udf10 Locale\/<\/strong><\/code><\/td>Description:<\/strong> This directory holds the JSON file for multi-language support. It facilitates easy translation and localization of the application.
\ud83d\udd39Purpose:<\/strong> Helps in localizing<\/strong> the application to different languages.
\ud83d\udd38 Example:<\/strong> en.json<\/code>, ar.json<\/code>, de.json<\/code><\/td><\/tr>
\ud83e\uddfe Models\/<\/strong><\/code><\/td>Description:<\/strong> This directory includes a base class that serves as a data store and enables other classes to track changes to that data. It provides a structured approach to data management within the application.
\ud83d\udd39Purpose: <\/strong>Structures and stores data for use across different screens.
\ud83d\udd38 Example: <\/strong>UserModel<\/code>, AppointmentModel<\/code><\/td><\/tr>
\ud83c\udf10 Network\/<\/strong><\/code><\/td>Description:<\/strong> This directory encompasses all the API configurations for the application. It centralizes the settings and endpoints required for network communication.
\ud83d\udd39Purpose: <\/strong>Centralizes API URLs, headers, and request\/response handling.
\ud83d\udd38 Example: <\/strong>ApiService.dart<\/code>, ApiConfig.dart<\/code><\/td><\/tr>
\ud83d\udcb3 PaymentGateways\/<\/strong><\/code><\/td>Description:<\/strong> This section is dedicated to handling payment gateway integrations. It provides a separate space to configure and manage various payment options within the application.
\ud83d\udd39Purpose: <\/strong>Keeps payment logic separate and manageable.
\ud83d\udd38 Example: <\/strong>RazorpayService.dart<\/code>, StripeService.dart<\/code><\/td><\/tr>
\ud83d\udcf1 Screens\/<\/strong><\/code><\/td>Description:<\/strong> This directory contains all the individual screens of the application. Each screen represents a distinct user interface with specific functionality.
\ud83d\udd39Purpose:<\/strong> Each screen is a complete unit with its own UI, logic, and data.
\ud83d\udd38 Example:<\/strong> LoginScreen<\/code>, ProfileScreen<\/code>, DashboardScreen<\/code><\/td><\/tr>
\ud83e\uddf0 Utils\/<\/strong><\/code><\/td>Description:<\/strong> The Utils directory holds the app\u2019s configuration files, including color schemes, constants, and commonly used functions. It promotes code reuse and encapsulates common functionalities.
\ud83d\udd39Purpose: <\/strong>Keeps shared logic and static values in one place.
\ud83d\udd38 Example: <\/strong>AppColors.dart<\/code>, Constants.dart<\/code>, CommonFunctions.dart<\/code><\/td><\/tr>
\ud83c\udfa8 app_theme.dart<\/strong><\/code><\/td>Description:<\/strong> This file allows customization of the application\u2019s theme, including colors, fonts, and styles. It provides a convenient way to define the visual appearance of the entire app.
\ud83d\udd39Purpose: <\/strong>Maintains a consistent look and feel<\/strong> across the entire app.
\ud83d\udd38 Example: <\/strong>LightThemeData()<\/code>, DarkThemeData()<\/code><\/td><\/tr>
\u2699\ufe0f configs.dart<\/strong><\/code><\/td>Description:<\/strong> This file enables configuration customization for the application, such as changing the app\u2019s name and other settings. It serves as a central hub for modifying various aspects of the application\u2019s behavior and appearance.
\ud83d\udd39Purpose: <\/strong>Central place to manage key variables that control app behavior.
\ud83d\udd38 Example:<\/strong>
const APP_NAME = \u2018KiviCare\u2019;
const DOMAIN_URL = \u201chttps:\/\/yourdomain.com\u201d;
const DEFAULT_LANGUAGE = \u201cen\u201d;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/p>\n\n\n\n

\ud83d\udcd8 INFO: Screens Directory Breakdown<\/strong><\/h2>\n\n\n\n

The screens\/<\/strong> folder is organized feature-wise. Each feature usually contains the following structure:<\/p>\n\n\n\n

\ud83d\udcc1 Common Subdirectories inside a Screen:<\/h4>\n\n\n\n
    \n
  • components\/<\/strong>: This directory contains all the reusable UI components used in the feature\u2019s screens.<\/li>\n\n\n\n
  • models\/<\/strong>: This directory typically holds data models or classes used within the feature.<\/li>\n\n\n\n
  • services\/<\/strong>: This directory is used for making API calls and often contains service classes responsible for fetching data from APIs, handling responses, and other related tasks.<\/li>\n<\/ul>\n\n\n\n

    \ud83d\udcc4 Common Files inside a Screen:<\/h4>\n\n\n\n
      \n
    • controller.dart<\/strong>: This file contains classes responsible for controlling the logic and state of the feature\u2019s screens.<\/li>\n\n\n\n
    • screen.dart<\/strong>: This file is where the UI implementation for the feature resides.<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"

      \ud83d\udd52\u00a0Estimated Reading:\u00a01 minute\ud83d\udcc2\u00a0Location:\u00a0File Structure \u2192 App Structure \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 […]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":286,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-289","post","type-post","status-publish","format-standard","hentry","category-prokit-flutter"],"featured_image_src":null,"author_info":{"display_name":"flutteradminiq","author_link":"https:\/\/documentation.iqonic.design\/prokit-flutter\/author\/flutteradminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":3,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/289\/revisions\/293"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/286"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}