Documentation

Lucodeia Blog - Flutter Blogger App

Fully completed Blogger app that provides most common screens required by any blog app.


  • Created: 20 February, 2022

If you have any questions that are beyond the scope of this help file, Please feel free to email via [email protected].


Requirements


App Configurations

Get started with Building your Application Json Configurations file

Get Started

We tried to make things simple for you :)

Just navigate to our builder page and start filling up your data.

https://builder.lucodeia.com/lucodeia-blogger

Builder Overview

STEP 1: Load Config

This will help you in making updates on your json file if you already have one. You can skip this if you want to start from the beginning.

Lucodeia

STEP 2: Categories

Add your blogger labels (categories) along with their images & colors to show them in the app.

Lucodeia

STEP 3: General

  • Configure your appbar logo
  • Configure App Side Menu (Drawer)
    • Drawer item support the following modules
      • Post
      • Page
      • Category
      • External Link
Lucodeia

STEP 4: Home Screen

Configure your home screen layout from this tab

Home Screen support 3 types of layouts

  • Categories List (It will display selected list of categories
  • Category’s Posts (It will display posts of the specified category
  • Latest Posts (It will display latest posts added
Lucodeia

STEP 5: Categories Screen

Configure your categories screen layout from this tab

Select your preferred list style, and set your category card option

Lucodeia

STEP 6: Posts List Screen

Configure your Posts List screen layout from this tab

Select your preferred list style, and set your post card option

Lucodeia

STEP 7: Post Screen

Configure your Post screen layout from this tab

Select your preferred style, and set your post screen option

Lucodeia

STEP 8: Settings Screen

Configure your settings screen data items

Lucodeia

STEP 9: Generate Your Json

Once you have done setting your app configuration, click Generate Application Config button to generate the json so that you can copy it

Lucodeia

Upload your json

Once you have your json config file, you will need to upload it so it can be consumed in the application.

Upload to your hosting

If you already have a dedicated or shared web hosting, just upload your file and copy the direct link pointing to it.

Upload to Google Drive

You can upload your json file with google drive so to use it within the application.

  • Navigate to your Google Drive account
  • Upload your json file
  • Right click on the uploaded file and click share to make it publicly available
  • Copy the link
  • Get the ID of your file from the link
  • https://drive.google.com/file/d/xxxx6YUHTaRBU884F9RzVnBw2xxxxx/view
  • Replace YOUR_ID in the following url with your file ID
  • https://drive.google.com/uc?export=download&id=YOUR_ID

App

Before starting these steps, make sure that you have followed all steps required in the requirement section to install Flutter and its dependencies (Android Studio/Xcode) and simulator depending on your operating systems.

Before getting started, open the project in your preferred editor or ide (vs code or android studio).

App Configuration

Open lib/core/constants/config.dart file.

Environment

  • Set blogId value with your Blogger Blog Id. You can find your blog id from your blogger dashboard url.
    https://www.blogger.com/u/3/blog/posts/12345678912345?hl=en
  • Set key value with your Google API Key. Requests to the Blogger APIs for public data must be accompanied by an identifier. Click Here for more about API Key and how to get one.
  • Set app_configurations_url value with your url pointing to your application configuration json file.
    Details can be found in App Configurations

Localization

  • Set your app locale by configuring values of appLocale and appSupportedLocales.
    Details can be found in languages/Locales section

General

  • Configure general content options
    • storageKey: key will be used to store local storage data
    • imagePlaceholder: Path of the placeholder image
    • postsPerPage: total number of posts to be displayed per page request
    • searchPostsPerPage: total number of posts to be displayed per search page request
    • commentsPerPage: total number of comments to be displayed per page request

Localization

  • Set your app locale by configuring values of appLocale and appSupportedLocales.
    Details can be found in languages/Locales section

OneSignal


App Colors

Open lib/core/themes/theme.dart file.

Before getting started, refer to this website to get full swatch color scheme for your color.

You can modify the colors value of the following classes as per your needs: AppColorsTheme, _LightAppColors, _DarkAppColors

Colors Representation

Colors are represented as hexadecimal value.

For example: #000000 this represented as black color. To apply this color in the app, it will be presented as 0xFF000000, where the FF is the transparency, with 00 being transparent and FF being opaque.

For more details, refer to Dart Color Class


Languages/Locales

To configure your app locale and language, first set your local in config.dart file as explained in App Configuration section

lib/core/constants/config.dart file

const Locale appLocale = Locale('ar', 'SA');
const List appSupportedLocales = [Locale('ar', 'SA')];

appLocale accept Locale object holding the following keys: languageCode, countryCode

Locale(languageCode, countryCode)

Examples:

Locale('en', 'US')
Locale('ar', 'SA')
Locale('hi', 'IN')

App Translations

App ships with two ready languages translations (Arabic, English)

If you would like to add another language just add new file in the following folder: lib/core/lang

The name of the json file must be the languageCode value that was set in your appLocale.

For example, if you set your locale value as Locale('hi', 'IN') then the translation json file must be hi.json

To apply translation, just copy the content of en.json file into your new language file and start translating the values.


Push Notifications

App is implemented with OneSignal push notification service.

Requirements

You must generate the appropriate credentials for the platform(s) you are releasing on

Android

You will need to generate a Google Firebase Server API Key

IOS

For IOS, you must have a Mac with a new version of Xcode

You will need to generate an iOS Push Certificate

Complete Configuration

After you complete setting up your OneSignal account with targeted platforms, copy your app id from your OneSignal Account (available in Keys & IDs

Paste the value of App Id in config.dart file located in lib/core/constants/config.dart

const String oneSignleAppId = 'xxxxx';

Routing Notifications on App

App support routing push notification sent to the app.

To route your notification to specific location within the app, apply the following

  • From OneSignal New Push screen, scroll to Additional Data section
  • Add these fields
    • module (required)
    • label (required only when routing page, category)
    • value (required)
Routing to Post Screen

Find this example to route notification to specific post screen

value is the ID of the post

Routing to Page Screen

Find this example to route notification to specific page screen

label is the Title of the page

value is the ID of the page

Routing to Category Screen

Find this example to route notification to specific category screen

label is the Title of the category

value is the ID of the category

Routing to External URL

Find this example to route notification to specific url

value is the URL to view

Supported Modules
  • categories - Navigate to categories screen
  • category - Navigate to category screen
  • search - Navigate to search screen
  • favorite - Navigate to favorite screen
  • settings - Navigate to settings screen
  • post - Navigate to post screen
  • page - Navigate to page screen

Google Admob

Configurations of Google Admob Ads

Requirements

Setting up your apps in admob account

You will need to set up a new app for both Android & IOS platform in your admob console

  • From Google Admob Console, navigate to Apps from side menu and click Add App
  • Complete required fields by Google to create your app
  • Apply the same process for other platforms

Configurations of Admob App Id in Flutter App

After you created your admob App Id for both Android & IOS platforms, follow these steps:

Android
  • Copy your Android App Id from your admob account
  • Navigate to android/app/src/main/AndroidManifest.xml file
  • Change value ca-app-pub-xxx with your Android App Id
IOS
  • Copy your IOS App Id from your admob account
  • Navigate to ios/Runner/info.plist file
  • Change value ca-app-pub-xxx with your IOS App Id

Create ad units to display ads

You will need to create ad units for your both Android & IOS app to display in your app

You can generate these ad units from your admob account by selecting your app and clicking on Ad units section

Banner Ads

After you create your banner ad units for both Android & IOS Platform, follow these steps:

  • Copy your Android & IOS Banner Ad Unit Ids from your admob account
  • Navigate to lib/core/constants/config.dart file
  • Change value ca-app-pub-xxxxxx of bannerAdUnitId with your Android & IOS Unit Ids
Interstitial Ads

After you create your interstitial ad units for both Android & IOS Platform, follow these steps:

  • Copy your Android & IOS Banner Ad Unit Ids from your admob account
  • Navigate to lib/core/constants/config.dart file
  • Change value ca-app-pub-xxxxxx of interstitialAdUnitId with your Android & IOS Unit Ids

You can specify which routes (pages) show show interstitial ad when pushed by it to interstitialAdRoutes list.

You can find all possible routes within the app in lib/core/router.dart


App Icon

Configurations your app launcher icon. Plugin official documentation HERE

  • Replace the image located in assets/icon.png with your app icon.
  • Run the following commands to generate the icons
  • flutter pub get
    flutter pub run flutter_launcher_icons:main

Build and Install App

After you make and complete your all changes and configurations on the project, navigate to project folder to complete building or running your app.

Android

Generate signing key

If you want to upload your application on Google Play you must sign it before uploading, to generate a signing key run the following command

keytool -genkey -v -keystore android/app/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

Open key.properties file located in android folder and Edit attribute values of the file.

Building app

To build your app run the following command

flutter build apk --release

To build app bundle, follow the steps in the link Flutter Android App Bundle

IOS

To release your app in IOS platform, you must have Mac with latest version of Xcode

Follow the following steps listed in these sections

To build your app run the following command

flutter build ios --release

Complete steps in the following section to review Xcode project settings


Contact

Get in touch with us on [email protected]


Changelog

Version 1.0.0 (20 February, 2022)

Initial Release