Setup document for Flutter Mobile Apps v1.0

Setup document – Flutter Mobile Apps v1.0

Install Google Flutter SDK Framework

Step 1. is to setup and install your development machine for google flutter SDK.

Download flutter from https://flutter.io/ Install link: https://flutter.io/get-started/install/

Windows install instructions: https://flutter.io/setup-windows/

Mac install instructions: https://flutter.io/setup-macos/

Linux install instructions: https://flutter.io/setup-linux/

 

Mobile application build instructions

Step 2. is how to build your mobile app from provided source code

  1. Extract (Unzip / or un tar) your mobile app source code at some suitable directory
  2. Import your mobile app directory as Flutter Project in Android Studio
  3. Open pubspec.yaml Click on “Packages get”.
  4. This shall install all dependencies for your flutter app

Install app on mobile device:

Step 3. Is to very you mobile app in debug mode on your mobile device or emulator:

  1.  Connect your mobile device to your computer via USB
  2. Make sure to enable your mobile device with developer mode ‘ON’
  3. Deploy & Run your app using top nav -> Build -> Run main.dart
  4. If all goes well, the android studio shall run your app in debug mode

 How to release your mobile app Android version to Google play store

You will need to add the app signing certificate as per general instructions for Google Android: https://developer.android.com/studio/publish/app-signing

  • Create your app signing certificate
  • Add the signing certificate path in the mobile app project , android sub project: /flutter_app/android/gradle.properties MYAPP_RELEASE_STORE_FILE=../../../conf/my-release-key.keystore
MYAPP_RELEASE_STORE_FILE=../../../conf/my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=alias_name
STORE_PASS=****
STORE_KEY_PASS=****

MYAPP_NAME=Wordpress
MYAPP_ID=com.opaclabs.wp
MYAPP_VERSION_CODE=2
MYAPP_VERSION_ID=5.6
TARGET_SDK_VERSION=27

– Build your flutter app to generate android release APK file:on Terminal type:$ flutter build app

This shall generate the release APK  file in your project : <project>/build/app/outputs/apk/release/app-release.apk

You may now upload & publish your APK release  via your Google playstore console.

WordPress/ Events/ HackerNews App – Project Structure

All screens and flutter dart files are located in your project / lib directory

Main configuration file :

/assets/themes/wordpress/user_session.json

Overview:

The apps are metadata driven.

This allows to add custom categories , sub categories or static data easily and more extensible On application bootstrap the app renders the home screen and drawer from the metadata configurations.

The apps has following important configurations and screen files:

– Configuration/Metadata files: Main configuration JSON file for app metadata <project_root>/assets/themes/wordpress/user_session.json

– Main Screens: All screen files are located at : <project_root>/lib/app/theme1/blogs/ Home screen : home.dart Home screen main component: home_page1.dart Login screen – login_page1.dart – Sample static dart screen Starter screens – landing_page1.dart / landing_page2.dart – Sample static dart screens for starter screens User Profile screens : profile.dart / profile_page1.dart Events Details / Post (Article ) Details : post_page1.dart Posts / Events Listings – listipage.dart Feeds / Posts/ Articles / Events feeds – feed_page1.dart / feed_page2.dart User Listings – users_page1.dart Constants – constants.dart

– Screen components All screen files are located at : <project_root>/lib/app/theme1/blogs/components Aboout tile : about_tile.dart Article / Post Cards – article_card.dart Group / Event Card – group_card.dart User Card – user_card.dart

API Adapters: To fetch/store data at wordpress / or custom server (example Laravel rest API) we use the API and Adapter facades

API – <project_root>/lib/api/api.dart The API class returns the required adapter class depending on endpoint-type

WordPress adapter is located at: <project_root>/lib/adapters/adaptor_wordpress.dart Adapter class finally make the call at server , fetches data and , returns the data after formatting it for screens

Current version has capability : to fetch paginated list of categories / posts from server. Search queries are also supported.

Details:

– Configuration/Metadata files: Main configuration JSON file for app metadata <project_root>/assets/themes/wordpress/user_session.json

NOTES: To make your app more dynamic you may load the user_session.json from server.

Metadata main sections are:

Drawer : main_modules list is used to draw app drawer Home page : It currently allows 2 components section 1 and section 2. Metadata section_1 and section_2 defines these . For example for wordpress app: home section a. category section and b. Posts section Global Section: app wide static / or dynamic data endpoints , title , subtitle etc

Drawer – main_modules section reference

{"content_type":"list","title":"Blogs","subtitle":"","icon":"posts"
    , "main_image":"http://eventmanagementdelhi.in/blog/wp-content/uploads/2018/01/events.jpg"
    ,"data_set":{
      "endpoint":"http://wordpress1.octobererp.com/index.php/wp-json/wp/v2/posts?_embed",
      "endpoint22":"https://demo.wp-api.org/wp-json/wp/v2/posts?_embed"
    ,"endpoint_type":"wordpress-rest","content_type":"post"}
    },
    {"content_type":"list","title":"Categories","icon":"categories","subtitle":"", "main_image":"http://eventmanagementdelhi.in/blog/wp-content/uploads/2018/01/events.jpg"
    ,"data_set":{
      "endpoint":"http://wordpress1.octobererp.com/index.php/wp-json/wp/v2/categories?",
      "endpoint22":"https://demo.wp-api.org/wp-json/wp/v2/posts?_embed"
    ,"endpoint_type":"wordpress-rest","content_type":"category"}
    }

main_modules : is a list of menu items for drawer. ** The app uses either of flutter icons/ or fontawesome plugin provided icons.

Each item entry has following structure:

For category/ Posts listings: title , subtitle content_type : user | categories | posts icon: user_account | category | post |event etc

For Users listings: title , subtitle content_type : user | categories | posts icon: user_account | users etc

If the data is dynamic for example for wordpress categories or posts – we need to use the dataset key/value:

  “data_set”:{ “endpoint”:”http://wordpress1.octobererp.com/index.php/wp-json/wp/v2/posts?_embed“,

    ,”endpoint_type”:”wordpress-rest”,”content_type”:”post”} },

The above is pretty simple usage. just define any rest api URL for posts and endpoint_type: “wordpress-rest” and you are ready to go live.

To add categories from wordpress , use the following data structure. Change your endpoint to your wordpress API for fetching categories

{"content_type":"list","title":"Categories","icon":"categories","subtitle":"", "main_image":"http://eventmanagementdelhi.in/blog/wp-content/uploads/2018/01/events.jpg"
    ,"data_set":{
      "endpoint":"http://wordpress1.octobererp.com/index.php/wp-json/wp/v2/categories?",
      "endpoint22":"https://demo.wp-api.org/wp-json/wp/v2/posts?_embed"
    ,"endpoint_type":"wordpress-rest","content_type":"category"}
    }

To add posts from wordpress , use the following item data structure. Change your endpoint to your wordpress API for fetching posts

 {"content_type":"list","title":"Blogs","subtitle":"","icon":"posts"
    , "main_image":"http://eventmanagementdelhi.in/blog/wp-content/uploads/2018/01/events.jpg"
    ,"data_set":{
      "endpoint":"http://wordpress1.octobererp.com/index.php/wp-json/wp/v2/posts?_embed",
      "endpoint22":"https://demo.wp-api.org/wp-json/wp/v2/posts?_embed"
    ,"endpoint_type":"wordpress-rest","content_type":"post"}
    },

Leave a Reply

Your email address will not be published. Required fields are marked *