Getting Started

Introduction

Welcome to our Docs!

Thank you for downloading our themes! We really appreciate it and ready to help you!

This guide will help you get started with the template! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to codekaze.id@gmail.com


Requirement

To get started, you need to do the following:

  • Flutter, you can get it here and follow the installation step.
  • Visual Studio Code, you can get it here.

Installation

1. Change Package Name

Install rename packages

flutter pub global activate rename

Run this command

flutter pub global run rename --bundleId com.example.your_app_name --appname "Your App Name"
2. Create your Firebase project

You can follow the instructions here

3. Enable Firestore, Google Login and Anonymous Login on your project

Click "Firestore Database", and click "Create database"

Click "Authentication", and enable Google & Anonymous Provider

4. Set Firestore Rules to:
allow read, write;

5. Download google-services.json and Copy to Your Flutter Project

  1. Ok, go to your Firebase Project Settings
  2. Add Android App with your new Package name.
  3. After that download the google-services.json file.
  4. Copy it to your_flutter_project/android/app

Add SHA-1 to Firebase Project Settings

There are many ways, this may depend on the IDE you are using. But I use this method:

  • Go to your project from terminal
  • Run this command:
    cd android && ./gradlew signinReport
You will get the SHA-1

Ok, now the application can be run properly.
In some applications, you will need to create an index.
You just need to click the link in the log.


How to Debug App

  1. Open your project in vscode
  2. Click Play Button


First Time Setup

We are required to create a firebase index for this application to work.
You can do it manually with

  1. Click Firestore Database
  2. Click Indexes tab
  3. Click Add index

But, We provide features to generate it easily. You just click the link in the application and paste it in the browser.
Then, it will create the index automatically.
Currently, this is the easiest and fastest way.

  1. Click First Time Setup
  2. Click Copy
  3. Paste to your browser
  4. Click Create Index
  5. Repeat for all existing links.
  6. Once done, wait a few minutes because creating the index takes some time.


Project Structure

Introduction

Our project structure is very easy to understand.
All views in this application will always be in the module folder. Each view, will always have a controller even though there is no logic in it.

We want this application to be easy to develop for large scale.
Currently you may only need 1 controller in 1 view.
But, if you need to create more than 1 controller for 1 view, you can add them in controller folder.

Sometimes you also want to break 1 view into several parts.
Please, add it to the view folder.


Modules

Our module directory contains all the views in the application.


module/ 

  module_name/
    view/
    controller/
    widget/

When you need to group the module,
You can add sub directories to make it more organized


module/ 

  auth/
    login/
      view/
      controller/
      widget/

    reset_password/
      view/
      controller/
      widget/

View & Controller Examples
You can copy this if you want to create new view
You just need to change the Example keyword to your module name.

View


import 'package:flutter/material.dart';
import '../controller/example_controller.dart';
import 'package:get/get.dart';

class ExampleView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: ExampleController(),
      builder: (controller) {
        controller.view = this;

        return Scaffold(
          appBar: AppBar(
            title: Text("Example"),
          ),
        );
      },
    );
  }
}

Controller

import 'package:get/get.dart';
import '../view/example_view.dart';

class ExampleController extends GetxController {
    ExampleView view;

    @override
    void onInit() {
    super.onInit();
    }

    @override
    void onReady() {
    super.onReady();
    }

    @override
    void onClose() {
    super.onClose();
    }
}


Widget

The widget folder in the module is used if you want to create a widget that is specific to the module itself.
That is, the widget is not to be shared with other modules.
At this level, we use setState state management more than getx to make implementing the custom widgets easier.


Shared Widgets

Our shared widget contains all the widgets that are allowed to be used for all modules,
and ideally it can be used for other applications as well.

So, we recommend making the widgets in that directory as portable as possible.
That is, it should be easy to move to another project.


shared/ 

  widget/
    widget_name/
      widget_file.dart
    widget_name/
      widget_file.dart


Data

Our data directory contains the models and classes associated with the API.
For example, you want to create an API for reading, editing and deleting data.
If you also have processes related to 3rd party libraries, that can also be done in this folder.


data/ 

  api/
    login_api.dart
  api/
    user_api.dart

  model/
    user.dart
    product.dart

Theme

Application Theme

You can change the application theme in this file:

shared/theme/theme.dart

We also provide this shortcut if you need it in the application.


theme.mainColor
theme.backgroundColor
theme.textColor
theme.inactiveColor

theme.success
theme.danger
theme.info
theme.warning
theme.primary
theme.secondary


Theme

FAQ

Q: I can't login using google
A: Please, add SHA1 to your Firebase Project. This is required!