# Flutter GetX Template with GetCLI

## GetX, Rest Api, GraphQL Api, FirebaseCLI, Hive,

Flutter Getx template to make starting project fast and easy .

Environment

• Flutter version 3.27.1
• Dart version 3.6.0
• Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
• Android Studio Ladybug | 2024.2.1 Patch 3
• Platform android-35
• Xcode 16.1
• CocoaPods version 1.16.2
• macOS 15.1
• Windows 11

Feature

• Every packages are up to date
• Rest api requests & error handling with app state
• GraphQL api requests & error handling with app state
• Hive for offline Caching
• Shared preference custom class
• Snackbar,Toasts & in app notifications
• FCM and Push notifications with Flutter Local Notification custom class
• Custom Image Picker with Cropper class
• Web Socket Manager class
• Pusher Service for Realtime chatting
• Theme (light/dark) & store current theme in shared pref
• Localization & store the current locale in shared pref
• Making app more responsive and stop font scaling This project will take care of all this repeatable things so you can start your project in few steps and you will have all the mentioned points set up and ready to use

Clone and start project

Before discovering folders lets first perform some actions to make the project ready to launch

• To run in iOS you must have installed cocoapods in your mac , Let's delete Pods folder and Podfile.lock and run

  flutter clean
  

  flutter pub get
  

  cd ios
  

  pod install
  

  cd..
  

• To make your app responsive and look exactly as your (xd,figma..etc) design you need to set artbord size for flutter_ScreenUtil in main.dart

  ScreenUtilInit(
    designSize: const Size(375, 812), // change this to your xd/Figma artboard size

• Change app package name

  flutter pub run change_app_package_name:main com.new.package.name
  

  • Change app name

    flutter pub run rename_app:main all="My App Name"
    

• Change app splash screen (replace assets/images/splash.png with your app splash logo) then run this command

  flutter pub run flutter_native_splash:create
  

• FCM: firebase has recently added (add flutter app) to your firebase which will make adding our flutter(android/ios) app to firebase take only 2 steps 🔥 but first you need to download Firebase CLI and in the terminal execute:

  dart pub global activate flutterfire_cli
  

  then follow the firebase guid you will get command similar to this one

  flutterfire configure --project=flutter-firebase-YOUR_PROJECT_ID
  

  and that's it! your project is now connected to firebase and fcm is up and ready to get notifications

  Important Note

  IOS require few more steps from your side to recive fcm notifications follow the Dcos steps and after that everything should be working fine from flutter side

Quick Start

• Responsive app: to make your app responsive you need to get advantage of using flutter_ScreenUtil so instead of using normal double values for height,width,radius..etc you need to use it like this

200.w // adapted to screen width
100.h // /Adapted to screen height
25.sp // adapter font size
10.r // adapter radius
// Example
Container(
    height: 100.h,
    width: 200.w,
    child: Text("Hello",style: TextStyle(fontSize: 20.sp,))
)

• Theme

  • Change theme

    MyTheme.changeTheme();

  • Check current theme

    bool isThemeLight = MyTheme.getThemeIsLight();

• Localization

  • Change app locale

    LocalizationService.updateLanguage('en');

  • Get current locale

    LocalizationService.getCurrentLocal();

  • Use translation

    Text(Strings.hello.tr)

Discovering Project

After setting up all the needed thing now lets talk about folder structure which is mainly based on Getx Pattern and there are some personal opinions, if you open your lib folder you will find those folders

.
└── lib
    ├── app
    │   ├── components
    │   ├── data
    │   │   ├── local
    │   │   └── models
    │   ├── modules
    │   │   └── home
    │   ├── routes
    │   └── services
    ├── config
    │   ├── theme
    │   └── translation
    └── utils

• app: will contain all our core app logic
  • components: will contain all the shared UI widgets
  • data: will contain our models and local data sources (local db & shared pref)
  • modules: app screens
  • routes: generated by get_cli and it will contain our navigation routes
  • services: contain all logic for making safe & clean api calls
• config: will contain app config such as themes, localization services
• utils: for our helper classes

Features

• Theme: if you opened theme package you will see those files

  └── theme
      ├── dark_theme_colors.dart
      ├── light_theme_colors.dart
      ├── my_fonts.dart
      ├── my_styles.dart
      └── my_theme.dart
  
  

  you only need to change app colors (light/dark_theme_colors) and if you want to change app fonts sizes and family just modify my_fonts.dart and that is it you don't need to worry about styles and theme you only need to edit my_syles.dart if you want to change some element theme data (padding,border..etc) and if you want to change theme just use this code

  // change theme and save current theme state to shared pref
  MyTheme.changeTheme();

  and if you want to check if the theme is dark/light just use

  bool themeIsLight = MyTheme.getThemeIsLight();
  // OR
  bool themeIsLight = MySharedPref.getThemeIsLight();

• Localization/translation we will use getx localization system which in the normal case code would look something like this

  class LocalizationService extends Translations {
      @override
      Map<String, Map<String, String>> get keys => {
          'en_US': { 'hello' : 'Hello' },
          'ar_AR': { 'hello' : 'مرحباً' },
      };
  }
  
  Text('hello'.tr); // translated text 

  but because we have so many words to translate we will separate keys file (strings_enum.dart) and languages map into different classes so code will become like this

  class LocalizationService extends Translations {
        @override
        Map<String, Map<String, String>> get keys => {
            'en_US': enUs,
            'ar_AR': arAR,
        };
    }
  // keys
  class Strings {
      static const String hello = 'hello';
  }
  // english words
  const Map<String, String> enUs = {
      Strings.hello : 'Hello',
  }
  // arabic translate
  final Map<String, String> arAR = {
      Strings.hello : 'مرحبا',
  }
  //result
  Text(Strings.hello.tr)

  and that explain why we have this file structure inside our translation package

     └── translations
         ├── ar_Ar
         │   └── ar_ar_translation.dart
         ├── en_US
         │   └── en_us_translation.dart
         ├── localization_service.dart
         └── strings_enum.dart
  

  to change language you will use

  LocalizationService.updateLanguage('en');

  and to get the current locale/language you can use

  LocalizationService.getCurrentLocal();
  // OR
  MySharedPref.getCurrentLocal();

Support

For support, email mirmoktadir@gmail.com Facebook Mir Moktadir LinkedIn Mir Moktadir Phone no: +8801701308477 (Whatsapp or Telegram)