Before Start

Flutter is an open-source UI software development toolkit created by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language and offers a rich set of pre-designed widgets to create responsive and visually appealing user interfaces.

React is a powerful and widely adopted open-source JavaScript library maintained by Facebook for building dynamic and interactive user interfaces. With its component-based architecture, React promotes modular and reusable code, allowing developers to create elegant and maintainable applications. Its virtual DOM efficiently updates only the necessary parts of the actual DOM, resulting in optimal performance and a seamless user experience.

System Requirement

Android Development

to develop this app into Android App, you needed

  • Android Studio is used to develop applications. https://developer.android.com/studio
  • Visual Studio Code provides many features that make it easy to develop Flutter apps. https://code.visualstudio.com/
  • Flutter for building apps. https://flutter.dev/docs/get-started/install
  • Firebase Account with Blaze Plan Activated https://firebase.google.com/

To install and run Flutter, your development environment should meet these minimum requirements:

  • Operating System: Windows 7 SP1 or later (64-bit), x86-64 based.
  • Disk Space: At least 1.64 GB (Note: This does not include disk space for the IDE and other development tools).

Install Android Studio

  • Download and install Android Studio https://developer.android.com/studio
  • Start Android Studio and run the 'Android Studio Setup Wizard'. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build Tools, all of which are necessary for Flutter development on Android.

Install Flutter SDK

  • Download Flutter from official site https://flutter.dev/docs/get-started/install
  • Extract the zip file and move the flutter to the selected Flutter SDK installation folder (e.g., C:\Flutter).

Install Visual Studio Code

You may still use Android Studio to build Flutter apps, but Visual Studio offers many capabilities, such as snippets, that will be very useful for developing this app, it is lighter than Android Studio.

To Install Visual Studio Code
Download and install Visual Studio Code from the official website https://code.visualstudio.com/download.

Set up your Android device

To run and test your Flutter app on an Android device, make sure it is running Android 4.1 (API level 16) or above.

  • Turn on Developer settings and USB debugging on your device. The Android documentation provides detailed instructions. https://developer.android.com/studio/debug/dev-options
  • Windows-only: Install the Google USB Driver https://developer.android.com/studio/run/win-usb.
  • Connect your phone to your computer via USB cord. If your device prompts you, authorise your computer to access it.
  • Run the Flutter devices command in the terminal to make sure Flutter recognises your Android device. Flutter utilizes the Android SDK version based on your adb tool by default. If you want Flutter to utilize a different Android SDK installation, change the ANDROID_SDK_ROOT environment variable to that location.

Set up the Android emulator

To run and test your Flutter app on an Android emulator, follow these steps;

  • Enable VM acceleration on your system. https://developer.android.com/studio/run/emulator-acceleration
  • Run Android Studio, click the AVD Manager icon, and then select Create Virtual Device.
  • For previous versions of Android Studio, navigate to Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu appears only while within an Android project.)
  • To create a virtual device without opening a project, navigate to Configure > AVD Manager and select Create Virtual Device.
  • Select a device definition and click Next.
  • Select one or more system images for the Android versions you want to replicate, then click Next. An x86 or x86_64 image is preferred.
  • To enable hardware acceleration, navigate to Emulated Performance and select Hardware - GLES 2.0. https://developer.android.com/studio/run/emulator-acceleration
  • Verify the AVD setting is correct, then select Finish.

For details on the above steps, see Managing AVDs. https://developer.android.com/studio/run/managing-avds

  • In Android Virtual Device Manager, click and run the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Run flutter Doctor

In Android Studio Menu -> Tools -> Flutter -> Flutter Doctor

This command examines the environment and presents a report of your Flutter installation's status. Check the output carefully for other software you might need to install or further tasks to perform.

[✓] Flutter (Channel stable, 3.16.7, on Ubuntu 22.04.3 LTS 6.5.0-14-generic, locale en_IN)
• Flutter version 3.16.7
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ef1af02aea (11 days ago), 2024-01-11 15:19:26 -0600
• Engine revision 4a585b7929
• Dart version 3.2.4
• DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /home/akash/Android/Sdk

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✓] Android Studio (version 2022.3)
• Flutter plugin version 75.1.2
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

Install Plugin

Android Studio Plugin

In Android Studio Menu -> File -> Settings. Open 'Plugins'. Make sure that 'Dart' and 'Flutter' plugins are installed.

Welcome

First and foremost, many thanks for purchasing this source code.

VoteHub is your digital access to secure and efficient online elections. Our user-friendly technology allows voters to cast their ballots from the comfort of their own devices, delivering a convenient and accessible democratic experience.

What It Is And How It Works

VoteHub revolutionizes the democratic process as an innovative online election app. Users start by registering and logging with facial recognition. Admin approval follows, granting users access to elections. The advanced facial recognition-based voting system ensures authenticity, and with an added layer of 2-step authentication via email (OTP), VoteHub guarantees a transparent and trustworthy election experience. The results are seamlessly revealed, marking the culmination of a modern and secure electoral journey.

Technology / Stack used in this app

  • Flutter
  • Firebase Backend

App Features

  • User Registration and Login
  • Admin Approval Workflow
  • Candidate Selection
  • Facial Recognition Voting System
  • Two-Factor Authentication via Email ( OTP authentication)
  • Polling System
  • Transparent and Trustworthy Elections
  • User-Friendly Interface
  • Security Measures
  • Accessibility

Web Admin Features

  • User Management
  • Candidate Management
  • Election Configuration & Management
  • Testimonial Management
  • Poll management
  • Results management
  • Configuration of Rules for election
  • Security Controls

Setup Project

What is Firebase

Firebase is a comprehensive mobile and web application development platform offered by Google. It serves as a backend-as-a-service (BaaS) solution, providing developers with a variety of tools and services to streamline the development process. Firebase includes features such as real-time database, authentication, cloud functions, hosting, and more.

Setup Firebase

  • Register free account at https://console.firebase.google.com/
  • after register, click Build new App at https://dashboard.back4app.com/apps
  • Then enter the app name it can be up to you, here I enter the name "Vote Hub"
  • and then click Continue
  • Then you will be asked to choose your Google Analytics account
  • choose your account and click Create Account
  • You have successfully established a Firebase project. In this project, we will develop various Firebase apps.

Create Android App in Firebase Project

After establishing a Firebase project, multiple apps with distinct configurations can be created within this project.

Create Android App

  • Click android icon
  • After that, we must fill in three details concerning our app, Package Name, App Nickname, and SHA-1 Key

Get Package name

  • Enter your Project Flutter Vote Hub, which was previously open in Visual Studio Code or Android Studio.
  • We will quickly and easily replace this app's default package name to your package name because the change_app_package_name flutter package is already being used in this project. Change the app package name at https://pub.dev/packages/change_app_package_name
  • Run the command below, but first change com.mycompany.myappname, to your package name

    flutter pub run change_app_package_name:main com.mycompany.myappname

  • So after that, the package name in your Vote Hub app has all changed, and you can copy the package name to firebase
  • And add your App nickname
  • For debug signing, we can fill it later, just click register app
  • after that you have to download the google-service.json file
  • and copy the file into your app project in the directory android/app/
  • after that click next in firebase,
  • and click Continue to console
  • Congratulations! Your app has been registered
  • However, we need to activate some Firebase capabilities for our app, such as authentication, so we can log in, and continue to the next phase.

Enable Firebase Feature

We add our app in firebase and insert the google-service.json file into our project, we need to activate various firebase features that our app utilises, first is the authentication function, so that our app may create a new user and also login.

  1. Enable Firebase Authentication

    • In Firebase Dashboard, click Authentication -> Sign in Method -> Email/Password
    • Then enable email, and click save

  2. Enable Firebase Firestore

    We also need to activate Firebase Firestore to save our app data in Firebase.

    • Click Firestore Database -> Create Database.
    • Select Start in Production Mode -> and then click Next
    • Select the nearest Cloud Firestore Location, and click Next

  3. Enable Firebase Functions

    To activate the Firebase function, we must update our project to the Blaze Plan. We also need to enable Firebase Firestore.

    • Click the Function and click Upgrade Project
    • Click Continue
    • Here you are required to fill out payment information, but don't worry, you will not be charged a cost, as long as your resource consumption is still below the restrictions specified by Firebase here https://firebase.google.com/pricing
    • After your blaze plan is active, your firebase function should also be active
    • Okay, for now, that's the only feature that has to be active in this Firebase panel; the others will be activated when we deploy the Firebase Cloud

Deploy Firebase Cloud Function

What is Firebase Cloud Function

Firebase Cloud Functions are serverless functions that automatically run in response to events triggered by Firebase features and HTTPS requests. Developers can use Cloud Functions to extend the functionality of their Firebase project, perform backend tasks, and integrate with other Firebase services.

To integrate the Cloud Function into our Firebase project, we'll deploy it from the /VoteHub_Cloud_Function_Firebase directory to our Firebase environment.

Set up Node.js and the Firebase CLI

You must have Node.js installed and the Firebase CLI configured to deploy functions to the Cloud Functions runtime.

  • Install Node.js

    Node.js version 20 is compatible and supported. Please refer to the "Set runtime options" documentation for essential information regarding the continued support of these Node.js versions.

  • Install npm

    Open $ cd functions

    npm install
    npm install -g firebase-tools

Initialize Firebase Cloud

  • If you are using Firebase Cloud Functions for the first time, you may be prompted to log in. Authenticate using the Firebase account associated with the project you created.

    firebase init

  • Then, you need to select the features to enable by pressing the spacebar. Activate the following features:

  • The feature is selected, press Enter

  • After that, select Use an Existing project -> enter

  • Choose the project we just created -> enter

  • Just leave the questions below blank and simply press enter.

  • Choose Javascript

  • Choose No or N in the questions below

  • Certainly, you may select Yes or Y as the inquiry is seeking approval to install necessary dependencies.

  • Again, the question wants to overwrite the file, choose N or No

    firebase deploy --only functions

Setup Web Admin Dashboard

Prerequisites

Set up Node.js and the Firebase CLI

You must have Node.js installed and the Firebase CLI configured to deploy functions to the Cloud Functions runtime.

  • Install Node.js

    Node.js version 20 is compatible and supported. Please refer to the "Set runtime options" documentation for essential information regarding the continued support of these Node.js versions.

  • Install npm

    npm install

  • Use the following command to log in to your Firebase account:

    firebase login

    This will open a browser window where you can authenticate your Firebase account.

  • Navigate to the Firebase console Project Settings -> General-> Add app

  • Copy the Firebase configuration into the src -> config -> FirebaseConfig.js file.

  • Run the following command to create a production-ready build:

    npm run build

  • If you haven't initialized Firebase in your project, run the following command in your project directory:

    firebase init

    This command will prompt you to select the Firebase services you want to use. Choose "Hosting" and follow the prompts to set up your project for hosting.

  • What do you want to use as your public directory?

    build

  • Once your build is ready, deploy your project to Firebase Hosting using the following command:

    firebase deploy

    This command will upload your build to Firebase Hosting, and you'll be provided with a hosting URL where your application is now live.

  • Access your hosted app:

    After a successful deployment, Firebase will provide you with a hosting URL. Open that URL in a web browser to access your hosted Android app.

Customize Vote Hub App

Change App Icon

Change the icon in this app is very easy, because Vote Hub App use the https://pub.dev/packages/flutter_launcher_icons library which makes it easier for us to change the app icon.

  • Just change the icon file at /assets/icons/ic_launcher.png with your icon, and make sure the name is same which is ic_launcher.png

  • After you change the icon, run this command on your terminal.

    flutter pub run flutter_launcher_icons:main

  • Replace the existing icon in your app with a new one.