Flutter Android & iOS Apps for WordPress Site

Flutter Android & iOS Apps For WordPress Site Project made in the latest version of Flutter. It can support all the latest versions of Android and iOS operating systems.

If you have WordPress Site then this Flutter Android & iOS App for WordPress Site App is a must need for you. This app will represent your website in a mobile interface.

Mobile is more user-friendly and handy so any of your traffic can read the article, and view the latest article by this app.

Features:

  1. WordPress Category view.
  2. Search any article easily.
  3. Web view enable
  4. Show all WordPress post list.
  5. View the article.
  6. Article can be share in anywhere.
  7. Facebook social connect.
  8. Rating.
  9. Share app.
  10. Help and feedback.
  11. You can use the SMTP or any server to get feedback.

Documentation Link: https://www.voltagelab.com/flutter-android-ios-apps-for-wordpress-site/

Apk Link: app_release.apk

Technical Guideline:

  1. Initial Setup and Making Demo Apk
    1. Prerequisites
      1. Flutter v2.5.0 and above 
      2. Visual Studio Code
      3. Android Sdk Installed in System (for Android)
      4. Xcode (for iOS)
    2. Opening Project in Visual Studio Code and Demo Apk
      1. Extract the Flutter Project. zip file
  • Open the Flutter Project Folder. Now you will see this file “FlutterAndroidAppforWordPress”.
  • Open this “FlutterAndroidAppforWordPress” file to the Android Studio / VS code.
  • Install the Dart and Flutter Extensions in Visual Studio Code / Android Studio.
  • Open pubspec.yaml file and click the arrow as shown in the circle in the below image, to get packages. 
flutter yaml

Hint: You can do this by opening the terminal (Cmd/Ctrl + J) on Visual Studio Code / Android Studio and running this command -> flutter pub get

  • Now you can create the sample demo app easily. Open the Terminal by Using Shortcut Cmd/Ctrl + J on Visual Studio Code.
  • Then run the following command -> flutter build apk or in Android Studio go to Toolbar > Build > Flutter > Build Apk.
  • Now you can install the demo app on your android phone.

Project Structure:

  1. Important Folders and Meanings
      1. project_folder/lib – 
  2. This includes all the Flutter Code. The Following Things will be Modified Here:  
    1. App Theme Color Customization
    2. Font Change.
    3. Website URL Change.
    4. Add SMTP server.

Show your WordPress Website:

  • Go to folders: utils > utils.dart.
  • Open the utils.dart
  • Now put the your WordPress site URL on wordpressSiteUrl = “”;
  • You can also change the additional things from here.

Project_folder/android –

This includes all the Native Android codes. The following things will be modified here: 

Android App Name, 

App Package Name, 

Android App Launcher Icon, 

Admob App Id

  1. project_folder/assets –

This includes all the Images in The App. We will Add Images (Splash Image, Chapter Images, Article Images) to be used within the App in their respective folders inside the assets folder.

Customization

  1. Changing Splash Image (First Image After App Opens)

You can change the splash image in project_folder/assets/images/splash.png, in this image you can replace the file image with your own  512 x 512 – PNG Image.

  1. App Name and Package Name
    1. For Android App Name 

Change the label name in AndroidManifest.xml file having file path: project_folder/android/app/src/main/AndroidManifest.xml

  1. For Package Name
    1. Change the package name (eg. com.package.app) in your AndroidManifest.xml at three locations, (folders: main, debug and profile) having file paths as follows.

File path: project_folder/android/app/src/main/AndroidManifest.xml

File path: project_folder/android/app/src/debug/AndroidManifest.xml

File path: project_folder/android/app/src/profile/AndroidManifest.xml

  1. Now change applicationId in app level build.gradle

File path: project_folder/android/app/build.gradle

  1. App Icon (Launcher Icon)
    1. Use the following website tool in order to create your App Icon easily.

https://appicon.co/

  • Choose Image and Download Zip File
  • Download and extract
  • Copy all the mipmapfolders inside ic_launcher/res
  • Paste them in the inside res folder at the following path in your project folder: project_folder/android/app/src/main/res/

All Steps Completed – 

Now you can create the apk easily. Open the Terminal by Using Shortcut Cmd/Ctrl + J on Visual Studio Code or Android Studio.

Then run the following command -> flutter build apk