Documentation

Lucodeia News - Flutter Wordpress News App

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


  • Last Update: 21 March, 2023
  • Created: 29 October, 2021

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


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

  • (Optional) Set your logo to be display on application top bar
  • 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
  • Add pages which will be displayed in About section
  • Add your social links
  • Add your contact information

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

Set your post screen option

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.


Video Posts

You can attach video to your post 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/config/settings.dart file.

  • Set your app name
  • Set your app locale by configuring values of appLocale and appSupportedLocales.
    Details can be found in languages/Locales section
  • Configure general content options
    • 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
  • Configure your Admob account
    Details can be found in Google Admob section

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

  • Update your sandbox environment (This environment will be used when sandbox value in settings.dart file set to true).
  • Update your production environment (This production will be used when sandbox value in settings.dart file set to false).

App Theme

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

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

You can modify the colors value as per your needs for both light and dark modes.

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 settings.dart file as explained in App Configuration section

lib/core/config/settings.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/l10n

The name of the json file must be the app_[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 app_hi.arb

To apply translation, just copy the content of app_en.arb 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


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/config/settings.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/config/settings.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/routing/app_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 pub run build_runner build
flutter build apk --release --no-tree-shake-icons

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 pub run build_runner build
flutter build ios --release --no-tree-shake-icons

Complete steps in the following section to review Xcode project settings


Contact

Get in touch with us on [email protected]


Changelog

Version 1.1.3 (21 March, 2023)

  • User authentication
  • Add new posts
  • Add/Show replies to comments
  • Code enhancements
  • UI enhancements

Version 1.1.0 (18 January, 2022)

  • Implement video posts
  • Font size customization
  • Contact information added to contact us screen
  • Implement categories to follow which allows users to follow specific categories
  • Add support for Admob Interstitial Ad

Version 1.0.4 (29 October, 2021)

  • Ability to add logo in home screen app bar from wordpress dashboard
  • Support subcategories
  • Deeplinking
  • Dark Mode
  • Flutter 2 and Null Safety
  • Customize Application Icon

Version 1.0.0 (16 April, 2021)

Initial Release