Documentation

Lucodeia News - Flutter Wordpress News App

Fully completed wordpress news app that provides most common screens required by any news app.


  • Created: 16 April, 2021

If you have any questions that are beyond the scope of this help file, Please feel free to email via support@lucodeia.com.


Requirements


Wordpress

Get started with Wordpress configurations

Plugins Installation

Required plugins

  • Lucodeia News
  • Advanced Custom Fields Pro

Optional plugins

  • Contact Form 7

Install Plugins

From wordpress admin dashboard, navigate to Plugins > Add New

click on Upload Plugin from the top of the screen

Upload and Install all plugins from project plugins folder, then activate all uploaded plugins


Configure contact form

From wordpress admin dashboard, navigate to Contact > Add New

Copy the following form code and replace it with the form template

<label>
Your name
[text* your-name]
</label>

<label>
Your email
[email* your-email]
</label>

<label>
Your message
[textarea your-message]
</label>

[submit "Submit"]

Complete other form configurations and settings based on your requirements then click save.


Configure App Settings

From wordpress admin dashboard, navigate to Lucodeia News from side menu

General

  • Select contact form that will be used in the app
  • Configure comments options
    • Allow comment – will allow and activate comment option in the app
    • Allow Anonymous Comments – This will allow adding comments without user authentication – will still need to be reviewed
  • Configure App Side Menu (Drawer)
    • Drawer item support the following modules
      • Post
      • Page
      • Category
      • External Link

Home Screen

Configure your home screen layout from this tab

Home Screen support 4 types of layouts

  • Spotlights Posts (It will display all posts marked as spotlight post
  • 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

Categories Screen

Configure your categories screen layout from this tab

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

Posts List Screen

Configure your Posts List screen layout from this tab

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

Post Screen

Configure your Post screen layout from this tab

Select your preferred style, and set your post screen option

Settings Screen

Configure your settings screen data items

After you complete your app settings click Update button to save your configurations


Category Options

You can set your category image and color from wordpress category screen.


Spotlight Posts

You can mark posts as spotlight from wordpress post screen.


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.

  • Set url value of your wordpress website by replacing your-wordpress-host with your url.
  • Set your app locale by configuring values of appLocale and appSupportedLocales.
    Details can be found in languages/Locales section
  • 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
  • Configure your OneSignal App Id
    Details can be found in Push Notification section

App Colors

Open lib/core/common/app_color.dart file.

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

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
  • contact - Navigate to contact 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

After You create your 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 with your Android & IOS Unit Ids

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 support@lucodeia.com


Changelog

Version 1.0 (16 April, 2021)

Initial Release