Introduction to Mighty News


MightyNews app is a smart Flutter news app. It contains Flutter source code and to build your news application with most useful features and eye-catching outlook. If you are planning to deploy your news app project for android and ios users, then it’s your perfect match to have on your hand. The product comes with current weather update, breaking news tab, topics to filter, push notification as well as RTL support. You can customise a bit and decide what to show or not into the app real-time.


Mighty News - App Intro Video

Project Structure & Features

Mighty News project structure and short description for each of them is as follow:

  • assets: apps/widgets/snippets images as well as appIcon are stored here.
  • lang: Multi-language support json file is here.
  • lib: Application main file and folder are located here.
    • component: All the Widgets except for screen will be declared here.
    • models: A base class that holds some data and allows other classes to listen to changes to that data.
    • network: All API configurations are located here.
    • screens: FileName contents Screen at the end of name eg. DashboardScreen.
    • store: It is used for State management technique MOBX.
    • utils: Basic ready made widgets are located here.
      • Colors.dart: Application colors are declared here.
      • Common.dart: Commmon functions are declared here.
      • Constant.dart: All the constant values are declared here.
  • pubspec.yaml: Application name and other project dependencies can be found here.

Application Features

  • Current weather
  • Breaking news
  • Recent news
  • Dark mode
  • Enable/Disable push notification from mobile app
  • AdMob support
  • Choose topic news functionality
  • Search functionality
  • Category listing functionality
  • OneSignal push notification
  • Html link, image and video support for description
  • User comment support
  • User profile
  • RTL support
  • Multi-language support
  • Bookmark functionality
  • Twitter support
  • photo viewer
  • OTP login
  • Google & Apple SignIn
  • TTS (Text to Speech)
  • Choose detail page from 3 unique screens
  • dynamic text size for detail screen
  • Related News in Post Detail
  • Post Views Count

Introduction to Flutter


Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for MOBILE, WEB, and DESKTOP from a single codebase. It is very easy to learn and currently it is getting more and more popular. With this blog post, you will learn some basic stuff about Flutter and after reading it, you will be able to create a simple application using this technology.

Click here to check out more details about flutter.

Tools & Setup


Prerequisite

  • Flutter & Dart SDK
  • Anyone IDE Android Studio (Recommended), Visual Studio Code or IntelliJ IDEA
  • To edit this project you must have Flutter and Dart installed and configured successfully on your computer.
  • Set up your editor - Install the Flutter and Dart plugins.
  • If you have got Android SDK installed and configured, to install Flutter you only need to:
    • Download Flutter SDK from official website and extract it.
    • Add path to previously extracted SDK to your PATH variable
    • Run flutter doctor tool to check if everything is configured correctly.
    • All above steps are mentioned here: https://flutter.dev/docs/get-started/install/

Android Studio – Windows​


Step 1 : Get the Flutter SDK

1 Download the following installation bundle to get the latest stable release of the Flutter SDK:

2 Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).

Step 2 : Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable: From the Start search bar, enter ‘env’ and select Edit environment variables for your account. Under User variables check if there is an entry called Path:

  • Info
  • Note that you have to close and reopen any existing console windows for these changes to take effect.
You are now ready to run Flutter commands in the Flutter Console!

Step 3 : Run flutter doctor

From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

c:\src\flutter>flutter doctor

If you find any issue during environment setup, please go online Click here

Android Studio – macOS​



Step 1 : Get the Flutter SDK


Step 2 : Update your path

  • Warning
  • Path variable needs to be updated to access “flutter” command from terminal. you can just update path variable for current terminal window only. and if you want to access flutter commands from anywhere in terminal, we need to update SDK path permanently.

To update PATH variable, we need to open terminal.

To update PATH variable for current terminal window only, then enter this command "export PATH="$PATH:`pwd`/flutter/bin"" and hit enter key.

To update PATH variable permanently, then Open or create .bash_profile file. to open or create that file, then enter "sudo open -e $HOME/.bash_profile" and hit enter key.

Append below line to bash_profile file at bottom of all other content. "export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"" as [PATH_TO_FLUTTER_GIT_DIRECTORY] is actual path of SDK folder.

Run this command on terminal "source $HOME/.bash_profile" to refresh PATH variables.

Then check whether our SDK is successfully installed or not.

You are now ready to run Flutter commands in the Flutter Console!

Run "flutter doctor" into terminal, If you are getting check list of flutter sdk requirements, it means SDK is successfully installed on your machine. and you can start building flutter apps on your machine.

If you find any issue during environment setup in macos, please go online Click here

Android Studio – Linux​​


Step 1 : Get the Flutter SDK

Step 2 : Update your path

  • Warning
  • Path variable needs to be updated to access “flutter” command from terminal. you can just update path variable for current terminal window only. and if you want to access flutter commands from anywhere in terminal, we need to update SDK path permanently.

You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session. To update PATH variable, we need to open terminal.

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

  1. Run source $HOME/. to refresh the current window, or open a new terminal window to automatically source the file.
  2. Verify that the flutter/bin directory is now in your PATH by running:

echo $PATH

Verify that the flutter command is available by running:

which flutter

You are now ready to run Flutter commands in the Flutter Console!

Getting Started (Build & Run)

  • Warning
  • All below steps are must be followed to build and run application

Download Project

Download and find the your project folder, use your preferred IDE (Android Studio / Visual Studio Code / IntelliJ IDEA) to run the project.

logo

Get Dependencies

After you loaded project successfully, run the following command in the terminal to install all the dependencies listed in the pubspec.yaml file in the project's root directory or just click on Pub get in pubspec.yaml file if you don't want to use command.

flutter pub get
  • Warning
  • All below steps are must be followed to build and run application
logo

Build and Run App

  1. Locate the main Android Studio toolbar.
  2. In the target selector, select an Android device for running the app. If none are listed as available, select Tools > Android > AVD Manager and create one there. For details, see Managing AVDs.
  3. Click the run icon in the toolbar, or invoke the menu item Run > Run.
logo

After the app build completes, you’ll see the app on your device.

If you don’t use Android Studio or IntelliJ you can use the command line to run your application using the following command

  • Warning
  • Below step requires flutter path to be set in your Environment variables. See https://flutter.dev/docs/get-started/install/windows
flutter run

You will see below like screen after you have build your app successfully

logo

Try hot reload

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

  • Warning
  • Do not stop your app. let your app run.

Configuration & Customization

Android Configuration

Setup Firebase


Setup AdMob


Open Android module in Android Studio


Change Application Name


Change Application Icon


  • Warning
  • Application icon name must be ic_launcher

Change Application ID

iOS Configuration


Open Project in Xcode


Change Bundle Name


logo

Change Bundle Identifier.

Bundle Id is a unique Identifier of your of app on iOS and MacOS. iOS and MacOS use it to recognise updates to your app. The identifier must be unique for your app.


logo

Change App Icons


Change Admob App Id

                    
    <key>GADApplicationIdentifier</key>
        <string>Add your Admob appId</string>
    
    

Google SignIn:-

In iOS Integration


Open Xcode and then open Info.plist file.

                    
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                < TODO Replace this value:>
                < Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID>
                <string>"Enter your REVERSED_CLIENT_ID"</string>
            </array>
        </dict>
    </array>
    
    

Apple SignIn:-

logo

Firebase Configuration


Create a Firebase project

Before you can add Firebase to your Flutter app, you need to create a Firebase project to connect to your app. Visit Understand Firebase Projects to learn more about Firebase projects.


  • Warning
  • If you're releasing your Flutter app on both iOS and Android, register both the iOS and Android versions of your app with the same Firebase project.

Visit for more information on how to setup for Android

Visit for more information on how to setup for iOS


Register your app with Firebase


Add a Firebase configuration file

Follow the instruction for enabling Firebase services in your Android app here


Enable the Google, Phone and Apple SignIn


logo

Flutter Configuration

Setup AdMob


Setup OneSignal

1. Create a OneSignal Account

One Signal is used for send the push notification into mobile or web. for more detail about OneSignal Documentation.

Follow below steps


2. Configure OneSignal on App

For Android and iOS:-
Follow instruction for OneSignal Configure Here.


Generating Twitter API Key


Enable the Twitter:-

Open this link and add your API Key and API Secret which you have newly generated, then click on save button.

logo

Add new Language to Flutter App

Step 1 : Goto the lang folder and create new file or paste your file.

This file name must be languagecode.json. For example : en.json

  • File Format
  • {"key":"value",...}
  • Warning
  • The Key name must be same as other. Only value is changed
image

Step 2 : After adding json file in lang folder. Add language flag image in assets/flag folder.

image

Step 3 : Goto lib/models directory and open LanguageModel.dart file and add language code in getLanguages() List.

For example : Language(0, 'English', 'en', 'assets/flags/ic_us.png', 'en-EN')

image

Change Text To Speech Language :-

Step 1 : Goto lib/utils/Constants.dart file

Step 2 : Asign language code to defaultTTSLanguage variable (default :- 'en-US')

image

List of language supported by Text To Speech

WordPress Setup


General Information

Thank you for choosing our plugin. We hope you enjoy building your project with us. It is a powerhouse of great features and powerful functionalities that would take months to develop.

Help and Support

The expert team at MeetMighty is always happy to help you with any questions or concerns you encounter. If you need any support with the item, please contact us through our email.

Support email:- [email protected]

Plugin Installation

  1. WordPress Information
  2. For WordPress Installation you can check the Famous 5-Minutes Install here:

    Support System: http://codex.wordpress.org/Installing_WordPress

    To use Plugin, you must be running WordPress 4.9.1 or higher, PHP 7.2 or higher, MySQL 5.6 or higher

  3. Recommended PHP Configuration Limits
  4. White screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

    • max_input_vars = 3000
    • memory_limit = 128M
    • max_execution_time = 300
    • max_input_time = 300
    • upload_max_filesize = 64M
    • post_max_size = 64M

  5. Enable JWT Authentication
  6. WordPress JSON Web Token Authentication allows you to do REST API authentication via token. It is a simple, non-complex, and easy to use.This plugin probably is the most convenient way to do JWT Authentication in WordPress.

    Enable PHP HTTP Authorization Header

    Shared Hosts

    Most shared hosts have disabled the HTTP Authorization Header by default.

    To enable this option you’ll need to edit your .htaccess file by adding the following:

    RewriteCond %{HTTP:Authorization} ^(.*)
    RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

    To enable this option you’ll need to edit your .htaccess file by adding the following: (See Issues)

    SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
  7. How to install plugin
  8. How to add a new plugin in WordPress

    logo

    You can locate the plugin zip folder in your package zip file

    worpress_zip/mighty-news-api.zip

    logo

  9. Permalink Setting

  10. logo
  11. Required Plugin
  12. Make sure required plugin should be activated.

    required-plugin

How to Set OneSignal – Web Push Notifications

OneSignal is an easy way to increase user engagement. Use OneSignal to send visitors targeted push notifications so they keep coming back.

  1. Configure – Web Push Notifications

  2. logo
  3. Enable Push Notifications

  4. logo

Install WP Mail SMTP

  1. Install WP Mail SMTP

  2. logo
  3. Email configuration

  4. logo
  5. Email Test

  6. logo

    Note : If sent mail goes into the spam then change mailer and set email configuration as per mailer.Default mailer is php mailer.

  7. Example : Other SMTP Configuration

  8. logo

    If you set gmail account as Other SMTP configuration then perform below steps:

    • Login to Gmail
    • Click to “Account”
    • “Less secure app access” (If it is “Off” then make it “On”)
    • logo

How to add video

  1. Open Videos section and select Add New

  2. logo

    Add your video title , select any one video type (youtube, iframe/embedded and custom URL) and paste your video URL. Set your video image in featured image and then publish.

    logo

Select categories for dashboard post, Set social link, privacy policy, terms and condition, and copyright text

  1. App Dashboard

  2. logo
  1. How to add breaking news

  2. logo

    Note : If you are adding new post ( news ) then it is default showing on newest post ( news ). And for breaking post ( news ), display only those post ( news ) which is mark as breaking.

No matching client found for package name


  • The error is "package_name" in google-services.json is not matching with your "applicationId" in app gradle.
  • Just make sure the package_name and applicationId both are same.
Learn more at firebase-configuration

Flutter SDK Not Available


Download the SDK and point the SDK folder path in your future projects.

There are different sources you can try

  1. You can clone it from the Github Repository
  2. Download SDK zip file + extract it after downloading
  3. You can also Download any version(including older) from here (For Mac, Windows, Linux)

Use the SDK path in your future projects

logo

Dependency Error


When you run the application and you see error like this

 Running "flutter pub upgrade" in mighty_news...
The current Flutter SDK version is 1.17.5.
Because mighty_news depends on flutter_svg >=0.18.0 which requires Flutter SDK version
>=1.18.0-6.0.pre <2.0.0, version solving failed. pub upgrade failed (1; Because
mighty_news depends on flutter_svg >=0.18.0 which requires Flutter SDK version
>=1.18.0-6.0.pre <2.0.0, version solving failed.) Process finished with exit code 1
Error Possibilities:
Generally, this error occurs when 
Error Possibilities

Generally, this error occurs when

  1. one of your third party package version is not supported.
  2. your Flutter SDK version not matched with one of your third party packages. for ex, your current Flutter SDK version is 1.20.0 and third party package targets Flutter SDK version 1.17.0.

Solution


After implementing the above solution, run the below command in the terminal.

flutter pub get

Authorization header not found


Message: Authorization header not found

Note If you faced this error during development then this error due to header not set on your admin panel

Solution: Just check Enable JWT Authentication section wordpress document to resolve this issue

Expired token


Message: Expired token

This error occurs due to the Expired user token.
Solution: Logout and re-login to your flutter app
  • Warning
  • We are working on autologin system. we will update it soon.

FAQ

Change Log

Version 11.0 - 17 Feb 2021

  • Added - Multiple Dashboard Layouts
  • Added - About App Info
  • Version 10.0 - 16 Feb 2021

    Version 9.0 – 30 Jan 2021

    Version 8.0 – 23 Jan 2021

    Version 7.0 – 13 Jan 2021

    Version 6.0 – 07 Jan 2021

    Version 5.0 – 29 Dec 2020

    Version 4.0 – 19 Dec 2020

    Version 3.0 – 16 Dec 2020

    Version 2.0 – 15 Dec 2020

    Version 1.0 – 05 Dec 2020

    MeetMighty Help & Support

    We like to hear you out when you get stuck or encounter difficulty with our products. As soon as you buy one of our products – you can open a support ticket and share your concern right away.

    Submit support ticket: https://support.meetmighty.com/


    Support Policy:

    It is recommended that before submitting a ticket you take a close look at product documentation (Docs folder in the archive you have downloaded from Themeforest/Codecanyon). To get technical support and assistance, you need to have a valid purchase code. You will find this when you SignIn your Codecanyon/Themeforest “Download” page. Click on the product’s download link.

    Please Note:

    Free support policy includes troubleshooting, technical assistance with the product only. It does not include any customization, additional features integration or concerns about third-party plugins compatibility. But, support is applied to plugin(s) we have developed and integrated ourselves. We appreciate your understanding!

    If you need assistance and information on purchased product that is not covered in documentation, post them on our support portal at https://support.meetmighty.com/ You can expect answer within 24-48 hours, usually as soon as possible in the order they were received.

    Additionally, if any support ticket has no response from the item owner for more than 7 days, that support ticket will be closed by default. However, if you need further assistance, you can create a new ticket.

    All support requests are being processed on business days (Monday to Saturday) from 9:00 to 18:00 (GMT +05.30). We are in GMT+5:30 time zone. We address all the support queries 6 days weekly on the first-come, first-solve basis (Sundays off).

    Do you have any pre-sales questions or concerns, please write to us via our website contact page or email us at [email protected]. We like getting positive feedback from our customers, and this is why we do our best to earn it! Write a review: https://codecanyon.net/downloads

    Change Log

    Update your application to give for the best experience – check out what’s new and improved. Thank you

    Thank you for visiting

    logo

    Designed with ♥ by MeetMighty