Documentation
Lucodeia Blog - Flutter Blogger App
Fully completed Blogger app that provides most common screens required by any blog app.
- Version: 1.0.0
- Author: Lucodeia
- 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
- Latest version of Dart & Flutter Framework(Get started here)
- Set up your editor (Android Studio - Visual Studio Code)
- Blogger Blog (Get it now)
- OneSignal Push Notification (Register)
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-bloggerBuilder 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.
STEP 2: Categories
Add your blogger labels (categories) along with their images & colors to show them in the app.
STEP 3: General
- Configure your appbar logo
- Configure App Side Menu (Drawer)
- Drawer item support the following modules
- Post
- Page
- Category
- External Link
- Drawer item support the following modules
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
STEP 5: Categories Screen
Configure your categories screen layout from this tab
Select your preferred list style, and set your category card option
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
STEP 7: Post Screen
Configure your Post screen layout from this tab
Select your preferred style, and set your post screen option
STEP 8: Settings Screen
Configure your settings screen data items
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
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
YOUR_ID
in the following url with your file IDhttps://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
-
Configure your OneSignal App IdDetails can be found in Push Notification section
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 screencategory
- Navigate to category screensearch
- Navigate to search screenfavorite
- Navigate to favorite screensettings
- Navigate to settings screenpost
- Navigate to post screenpage
- Navigate to page screen
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/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
- Register a Bundle ID
- Create an application record on App Store Connect
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