FlexKit Documentation

Introduction

FlexKit is a well-designed and developed general-purpose mobile UI kit developed with Flutter. Flutter is an open source mobile development SDK created by Google and used to develop Android and iOS applications.

FlexKit makes it easy for a developer to create a mobile app with a modern look and feel. Developing a well-designed user interface for today’s mobile apps saves a lot of fuss and time. FlexKit is ready to use and can be easily integrated into any Flutter project. The code structure is easy to understand, any part can be removed and added to the flutter application.

FlexKit includes about 50+ usable widgets, 100+ screens covering many use cases and 3+ complete application pages. It has both light and dark themes and works great with Android and iOS.

1. Light & Dark Theme Support: Light and Dark theme support allows your app to offer different color schemes for users to choose from. Light themes are typically used in well-lit environments, while dark themes are preferred in low-light situations. Implementing this feature provides flexibility and user comfort.

2. Transition Animations: Transition animations are a great way to create smooth and visually appealing user experiences when navigating between different screens or views in your app. Flutter provides various animation packages and tools to achieve this effect, including the built-in Hero widget and packages like animations.

3. RTL Support: Right-to-Left (RTL) support is crucial for making your app accessible to users in regions where languages are read from right to left. Flutter has built-in RTL support, and you can ensure that your app’s layout and text direction adapts appropriately for RTL languages.

4. Multi-Language Theme Support: Supporting multiple languages, also known as internationalization (i18n) and localization (l10n), allows your app to cater to a global audience. You can create translations for different languages and adjust the app’s theme based on the user’s language preferences.

5. State Management (GetX): GetX is a state management package for Flutter that offers a simple and efficient way to manage application state. It also provides features for navigation, dependency injection, and more. Using GetX can help you maintain a clean and organized codebase, making it easier to manage the state and logic of your app.

Apps

• Food App (Foodie Delight)
• Cab booking app (Driver Delight)
• Fitness App (FitLife)
• News App (NewsHub)

Pre requisite

1. Flutter & Dart SDK: Ensure that you have the Flutter and Dart SDKs installed. In your case, you’ve mentioned using Flutter version 3.13.7. It’s important to have compatible versions of both Flutter and Dart.

2. IDE: You can use one of the recommended integrated development environments (IDEs) for Flutter development: Android Studio (recommended), Visual Studio Code, or IntelliJ IDEA. Make sure to install the Flutter and Dart plugins for your chosen IDE.

Project Setup:

1. Editing the Project: To edit the project, it’s essential to have Flutter and Dart installed and configured successfully on your computer.

2. Set Up Your Editor: Install the Flutter and Dart plugins for your chosen IDE. These plugins provide tools and features to streamline Flutter development.

3. Install Flutter: If you have the Android SDK already installed and configured, you only need to install Flutter. To do this:

• Download the Flutter SDK from the official website.
• Extract the downloaded SDK to a suitable location on your computer.

4. Add Flutter to PATH: To make Flutter accessible from the command line, add the path to the Flutter SDK to your system’s PATH variable. This allows you to run Flutter commands from any directory.

5. Run flutter doctor: After setting up the SDK and adding it to your PATH, run the flutter doctor command. This tool checks if everything is configured correctly and provides information on any missing dependencies or setup issues.

You’ve also mentioned that additional details and instructions for these steps can be found in the official Flutter installation guide: Flutter Install. This is a great resource for developers looking to set up their development environment for Flutter.

These instructions provide a clear path for setting up a Flutter development environment and starting to work on your project effectively.

Running a Flutter application involves a few simple steps. Below, I’ll provide a general guide on how to run a Flutter app on various platforms (iOS, Android, web, etc.) using the command line. Keep in mind that you should already have your Flutter project set up and the necessary dependencies installed.

1. Navigate to Your Flutter Project:
   Open a terminal or command prompt and navigate to your Flutter project’s root directory.
2. Check Connected Devices:
   Use the flutter devices command to check the available devices and emulators for your platform. This command lists the devices you can use for running your Flutter app.
3. Run the App:
   To run the app on a connected Android or iOS device or emulator, use the flutter run command followed by the target device, like this:

   flutter run

   If you have multiple devices or emulators, you can specify the target device using the -d flag. For example, to run on an Android emulator, you can use:

   flutter run -d emulator

   To run the app on the web, use the flutter run -d web command. Make sure you’ve configured your project for web support by running flutter create . in your project directory if it’s not already set up.

   For other platforms, such as macOS, Windows, or Linux, use the flutter run command, specifying the desired target platform with the -d flag.

4. Observing Output:
   You’ll see output in the terminal as Flutter compiles your code, and the app will be launched on the specified device or emulator. You can see the logs and any error messages in the terminal.
5. Hot Reload:
   One of the great features of Flutter is the “hot reload” capability. While the app is running, you can make code changes in your editor, save them, and Flutter will automatically reload your app with the new code. This is extremely useful for iterative development.
6. Stopping the App:
   You can stop the app by pressing Ctrl + C (or Cmd + C on macOS) in the terminal.

Remember that the specific commands may vary depending on your platform and development environment. Be sure to have your development environment properly set up, including having the necessary SDKs, emulators, or simulators installed for the target platform you want to run your Flutter app on.

├── android                       
├── assets                        
├── ios                        
├── lib                        
└── ├── app
│   ├── ├── controller
│   ├── ├── Model
│   ├── ├── UI
└── ├── constant
└── ├── lang
└── ├── service
└── ├── them
└── ├── utils
└── ├── widget
└── ├── main.dart
└── pubspec.yaml

1. FluxKit
   • This seems to be the core application directory, which contains the main app code and assets.
   • The android and ios folders contain platform-specific code and configurations for Android and iOS.
   • The assets directory is where you store static assets like images, fonts, and other files that your app uses.
   • The lib directory contains the main application code.The features subdirectory under lib likely contains code for various features or modules used in the app.
2. main.dart:
   • This is the entry point of your Flutter application. It’s the starting point of your app’s execution.
3. pubspec.yaml:
   • The pubspec.yaml file is where you declare the dependencies for your Flutter project. It specifies the packages and assets your app uses.

Setting up Firebase

Setting up Firebase for a Flutter project involves several steps. Firebase is a popular backend-as-a-service platform provided by Google, and it offers a wide range of features, including authentication, real-time database, cloud functions, and more. Here’s a general guide to setting up Firebase for your Flutter project:

Step 1: Create a Firebase Project

• – Go to the [Firebase Console](https://console.firebase.google.com/).
• – Click on “Add Project” to create a new Firebase project. Give it a name and select your preferred Google Analytics settings if prompted.

Step 2: Register Your App

• – Once the project is created, click on “Add App” and select the appropriate platform (iOS, Android, or web) for your Flutter app.

Step 3: Follow the Setup Instructions

• – Depending on the platform you selected, Firebase will provide detailed setup instructions. These typically include downloading configuration files (e.g., `google-services.json` for Android and `GoogleService-Info.plist` for iOS) and adding them to your Flutter project.

Step 4: Add Firebase to Your Flutter Project

For Android:

– Place the `google-services.json` file in the `android/app` directory of your Flutter project.

– In your `android/app/build.gradle` file, add the following dependency:

gradle
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

For iOS:

– Place the `GoogleService-Info.plist` file in the root of your Xcode project (usually inside your project’s Runner directory).

– Open your `ios/Runner/Info.plist` file and add the following:

xml
     FirebaseAppDelegateProxyEnabled
     NO

For web:

– Firebase for the web does not require specific files. You can set up Firebase in your Flutter web project by including the Firebase JavaScript SDK and following the Firebase web setup guide.

Step 5: Add Firebase Flutter Dependencies

– In your Flutter project’s `pubspec.yaml` file, add the necessary Firebase packages. For example, for Firebase Authentication and Firestore, you can add:

yaml
   dependencies:
     firebase_core: ^latest_version
     firebase_auth: ^latest_version
     cloud_firestore: ^latest_version

Step 6: Initialize Firebase

– In your Flutter app’s main Dart file (typically `main.dart`), initialize Firebase as the first thing in your `main` function:

dart
   import 'package:firebase_core/firebase_core.dart';
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     runApp(MyApp());
   }

Step 7: Use Firebase Services

– Now you can use Firebase services like Authentication, Firestore, Realtime Database, Cloud Messaging, and others in your Flutter app by importing and using the relevant Flutter Firebase packages.

Step 8: Testing and Deployment

– Test your app on a variety of devices and platforms to ensure Firebase integration works as expected.

– When you’re ready to deploy your app, be sure to follow the Firebase deployment and security guidelines for your specific platform(s).

Remember to consult the official Firebase documentation for the most up-to-date and platform-specific instructions. Firebase offers a wide range of features, so you can choose the services that best suit your app’s needs.

In Figma, you can use color styles to maintain consistency in your design and ensure that the same color is used throughout your project. Here’s how you can name your colors in Figma and then use those color names in your Flutter app’s app_theme_data.dart file to change the colors across your application

1. Export Colors from Figma:
   • Open your Figma file.
   • Identify the colors you want to export and ensure they have distinct names.
2. Change colors in application.
   • Open app_theme_data.dart.
   • Defined your color constants using the same names you used in Figma, and assign the corresponding color codes to them

By using color constants and maintaining the same color names in your Figma design and Flutter code, you can easily update your app’s colors by modifying the values in the app_theme_data.dart file, ensuring consistent and efficient color management across your application.

1. Create a new Dart file named app_en.dart in the lib directory of your Flutter project. In this file, you will define the English translations as a map. you can create a file name as per your language.
2. Create JSON localization files for each language you want to support. These files should contain key-value pairs for the translations.
3. Open the lib/services/localization_service.dart file in your Flutter project. This is where you’ll configure your app to use the language code and the corresponding language file.