Documentation
Lucodeia News - Flutter Wordpress News App
Fully completed wordpress news app that provides most common screens required by any news app.
- Version: 1.1.3
- Author: Lucodeia
- 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
- Latest version of Dart & Flutter Framework(Get started here)
- Set up your editor (Android Studio - Visual Studio Code)
- Wordpress (Get it now)
- OneSignal Push Notification (Register)
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
- Drawer item support the following modules
- 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 IdDetails can be found in Push Notification section
-
Configure your Admob accountDetails 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
- A Google Admob Account
- Android & IOS Admob App Id
- Android & IOS Admob Banner Ad Unit Id
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
Deeplink
Configurations of Android App Links and IOS Universal Links. Plugin official documentation HERE
Android App Links
App Links only work with https scheme and require a specified host, plus a hosted file - assetlinks.json.
- Navigate to android/app/src/main/AndroidManifest.xml file
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="YOUR_HOST" />
</intent-filter>
YOUR_HOST
with your website domain name ex. (www.lucodeia.com)https://domain.name/.well-known/assetlinks.json
IOS Universal Links
Universal Links only work with https scheme and require a specified host, entitlements and a hosted file - apple-app-site-association.
- add or create a com.apple.developer.associated-domains entitlement - either through Xcode (see below) or by editing (or creating and adding to Xcode) ios/Runner/Runner.entitlements file.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- ... other keys -->
<key>com.apple.developer.associated-domains</key>
<array>
<string>applinks:[YOUR_HOST]</string>
</array>
<!-- ... other keys -->
</dict>
</plist>
- Open up Xcode by double-clicking on your ios/Runner.xcworkspace file.
- Go to the Project navigator (Cmd+1) and select the Runner root item at the very top.
- Select the Runner target and then the Signing & Capabilities tab.
- Click the + Capability (plus) button to add a new capability.
- Type 'associated domains` and select the item.
- Double-click the first item in the Domains list and change it from webcredentials:example.com to: applinks: + your host (ex: my-fancy-domain.com).
- A file called Runner.entitlements will be created and added to the project.
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
- Register a Bundle ID
- Create an application record on App Store Connect
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