Introduction

Last updated: 2022-04-17

Woogoods is a complete mobile app for both Android & iOS based on Woo-commerce buy and sell using Flutter Framework. You can convert your Woo-commerce into a native Android and iOS App within a few hours. We have used Flutter from Google to build this entire application and used lots of animations to make this app user-friendly. It could be able to satisfy users with impressive UI design and smooth performance on both iOS and Android devices. We have also used Firebase Push Notification to send notifications to the user and also used live chatting service. The app will always be synced with Woo-commerce site data via WC REST API. You can customize a bit and decide what to show or not into the app real-time.

Prerequisite:

  • Flutter version must be : Flutter 2.10.4 • channel stable
  • Dart version must be: Dart 2.16.2 Make sure your flutter and dart versions are correct.

Follow the flutter documentation from https://flutter.dev/docs/get-started/install to install the given version of flutter in your pc/mac

Must Follow

Danger

3. Setup Firebase

For Firebase setup, you just need to change the Google json file.

  • Create a new firebase account, register your application with your package name.
  • Now download the google-services.json file for android and GoogleService-Info.plist for ios replace with current.
  • Refer for android Link and for ios Link
5. Build the App for testing (build and apk)
  • https://flutter.dev/docs/deployment/android see the doc for reference In
  • terminal run : flutter build apk
  • It will build an apk and show the folder. You can then install it in your phone to test, or share to multiple users for testing.
8. Generate play store uploadable files for release
Android Signing

Flow this link - https://docs.flutter.dev/deployment/android Android

iOS Signing

Flow this link - https://docs.flutter.dev/deployment/ios

PROJECT STRUCTURE

Woogoods project structure and short description for each of them is as follow:
  • Assets:apps/widgets/snippets images as well as appIcon are stored here.
  • Lib:Application main file and folder are located here.
    • Constant: All the constant file are declared here
      • colors.dart: Application colors are declared here.
      • strings.dart: Application common strings are declared here.
      • style.dart: Application style functions and data are declared here.
      • images.dart: Application images asset data are declared here.
    • controller: All API service controls are located here.
    • helper: Date converter, sqlite database helper and devendency injection file here
    • language: Multi-language support class is here.
    • models: A base class that holds some data and allows other classes to listen to changes to that data.
    • services: All API configurations and Network service are located here.
    • utils: Date converter and othersMethod here.
    • view: All view type class and widgets here
      • widgets: All the Widgets except for screen will be declared here.
      • screens: FileName contents Screen at the end of name eg. DashboardScreen.
  • Pubspec.yaml:Application name and other project dependencies can be found here.

FEATURES LIST

  • Splash screen
  • Inro Screen
  • Clean UI : All screen and widgets clean ui design
  • User Sign In: Register users as Wordpress user. Login & Registration Google and Facebook with username/email and password. Guest login – Access the app & contents without login.
  • Shimmer Loading: Shimmer effects are loading indicators used when fetching data from a data source that can either be local or remote
  • Pull Refresh: Pull to refresh feature to refresh the contents anytime user wants.
  • Multi-language Support : You can add your own language to the app with the easiest way.
  • RTL RTL support for rtl type languages like arabic, hebrew etc.
  • Html Description: Content description supports images, gifs, videos, iframe videos, tables, lists, custom html & css designs, etc.
  • Flash Deal: You can set the flash deal product directly from your wordpress dashboard and show app
  • Toady's Deal: The app will show the todays deal prodcut from your wordpress site.
  • Brands: The app will show the brands from your wordpress site.
  • Categories, Sub-Categories & Child-Categories: The app supports both categories, sub-categories & child-categories. You can filter categories, sub-categories & child-categories product
  • Review: Product all reviews show with product
  • Product Reviews: Reviews and ratting show inside product
  • Search And Filter: Real-time search and advance filter inside product
  • Slider Banner: The app will show the promotion slider banner from your wordpress site.
  • Account: User profile, order history and service.
  • Coupon: The app will show the order coupon from your wordpress site.
  • Cart: Product add to cart then buy cart selected item.
  • Checkout: Cart item and single product checkout page redirect
  • Create Order: Your favorite item buy now
  • Order List: The app will show the order list base of status from your woocommerce site.
  • Order Tracking: Your order tracking time and status
  • Recent Views: Recent views product show from your recent views product
  • Live Chat: Live chat user to admin
  • Address Book: You can save shipping address and use order time.
  • Dark Mode: You can change dark and light theme.
  • Push Notifications : Admin can send push notifications directly from admin panel to all android & iOS users in just one click. Also send Push notification new product and update product.
  • Cached Image: Used cache image service to save online images to local database for faster experience. Images.
  • Bookmark : User also can save their favourite contents.
  • Right-to-Left Animation: All screen open right side to left side
  • Faceboook Group & Page: Joined Faceboook Group & Page just add link.
  • Offline Database: SQLite.
  • State Management: GetX
  • Dependency Injection: Api client, Repository and controller add getx dependency injection
  • Navigation Management: Open all screen use getx navigation management
  • HTTP: Use flutter http package. Fetch all wordpress data this http request.

Installation

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.

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Setup and Run Android studio

  • Install Android Studio from https://developer.android.com/studio
  • Extract the scource_code.zip. You will find this inside the main zip.
  • Open the folder in your android studio.
  • Even if you are building an app for ios, use android studio for the build.
  • Then in your android studio terminal run:

    flutter pub get ** You need this to get all 3rd party packages from pub.dev

Setup wordpress

Installation of WordPress Blog with Cpanel Requires:

  • Getting Hosting & Domain Name
  • Install WordPress
  • Choose & Install a Theme
  • Install Requires Plugin
  • Write Your First Blog

WordPress Information

For WordPress Installation you can check the Famous 5-Minutes Install here: We Recommend to use Update version of PHP, Wordpress & Mysql

Recommended PHP Configuration Limits

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:

  • 1. max_input_vars = 3000
  • 2. memory_limit = 128M
  • 3. max_execution_time = 300
  • 4. max_input_time = 300
  • 5. upload_max_filesize = 64M
  • 6. post_max_size = 64M
Step 1
www.yourdomain.com/cpanel

Login by username & Password

step-1
Step 2

After login to cpanel, will find the softaculous apps installer or Wordpress. Click on Wordpress icon.

step-2
Step 3

You will find the install button to install wordpress.

step-3
Step 4

After Clicking on Install button you will find a page requires to select your domain name where to install and set up the username, password. Then do the final installation of wordpress.

step-4
Step 5

Great! You are almost done. Now you can login via this link with username & Password.

step-5
Step 6

Here the Dashboard of Wordpress Website.

step-6

Setup WooCommerce

WooCommerce can be installed the same as any other WordPress plugin. Full installation and configuration of WooCommerce on your site is an additional optional step to help with full setup, this is available in the Setup wizard

Installation via WordPress Admin

If you have an existing site and want to install WooCommerce, using the WordPress Admin is the most straightforward option as it handles everything for you.

Installation

  1. Go to: Plugins > Add New.
  2. Search for “WooCommerce”.
  3. Click Install Now.
  4. Click Activate Now and you’re ready for the WooCommerce Wizard.
WooCommerce

WooCommerce Setup Wizard

When WooCommerce is activated for the first time, the WooCommerce Setup Wizard will be the next screen you see after clicking “Activate”.

This helps you set up and configure your site with WooCommerce functionality.

For a full walkthrough of the Setup Wizard (also known as the Onboarding Wizard), please read through the WooCommerce Setup Wizard documentation.

APIs

The tawk.to Live Chat app makes it easy to monitor and chat with visitors on all your WordPress websites and Mobile App. Be there when they need you with unlimited

Setup Live Chat(tawk.to)

Follow Steps:
  1. For tawk.to setup, Reference Link
  2. Don't have an account? Create free account
  3. Your name, email and password enter then create account.
  4. Please select your languge then click Next button admob
  5. Your website name and url enter then click Next button admob
  6. Then click Skip button admob
  7. All create process complete then click Done button admob
  8. Click setting button and open Administration section and click Chat Widget admob
  9. Selected Chat Widget and copy direct chat link admob
  10. Now come back to Application source code..
  11. Open lib/constants/strings.dart file. and paste direct chat link admob
  12. Now come back to your website admin panel and click add plugin option.
  13. First search tawkto and click Install Now button with active this plugin. admob
  14. Now run the application. your live chat that complete.

Payment Gateway

A payment gateway is a technology used by merchants to accept debit or credit card purchases from customers. The term includes not only the physical card-reading devices found in brick-and-mortar retail stores but also the payment processing portals found in online stores.

Stripe Gateway

Follow Steps:
  1. For Stripe setup, Reference Link
  2. Sign In / Sign Up StripeLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search wooCommerce stripe then install and active this plugin. admob
  5. Redirect plugin list, click wooCommerce stripe setting. admob
  6. Then click Enter account key button admob
  7. Again open stripe dashboard/Developer/Webhooks/ and last click Add an endpoint admob
  8. Copy endpoint url and paste Endpoint URL filed admob admob
  9. Select charge events and click Add Events button. Then click Add endpoit button. admob admob
  10. Copy webhooks secret and paste your admin panel webhooks secret filed. admob admob
  11. Again open stripe dashboard/Developer/API keys/ copy Publishable and secret key then paste admin panel Publishable and secret key filed. admob admob
  12. Then check test connection and click Save live keys admob
  13. Now all process complete then enable Stripe payment gateway. admob
  14. Now come back to Application source code..
  15. Open lib/constants/strings.dart file. and paste Publishable and secret key admob admob

Paypal Gateway

Follow Steps:
  1. For Paypal setup, Reference Link
  2. Sign In / Sign Up StripeLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search WooCommerce PayPal Payments then install and active this plugin. admob
  5. Redirect plugin list, click WooCommerce PayPal Payments gateway Settings. admob
  6. Then open wooCommerce settins screen and click Payment tab. Now click setup button. admob
  7. Click Active Paypal button or menual added paypal credentials. note: your paypal credentials get paypal account dashboard admob
  8. If you have added a manual, click the Save changes button admob
  9. Now all process complete then enable Paypal payment gateway. admob
  10. Now come back to Application source code..
  11. Open lib/constants/strings.dart file. you paypal public and secret key get paypal account dashboard and paste Public and secret key. admob

Paystack Gateway

Follow Steps:
  1. For Paystack setup, Reference Link
  2. Sign In / Sign Up and Full Setup your acountLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search wooCommerce stripe then install and active this plugin. admob
  5. Redirect plugin list, click Paystack wooCommerce payment gateway Settings. admob
  6. Copy webhooks URL. flow below image admob
  7. Now open your paystact dashboard. Open setting screen then click Api keys and Woobhooks tab
  8. This copy URl paste Webhooks filed and click Save Changes button admob
  9. Copy secret key and public key. flow below image admob
  10. Now back admin panel paystact payment tab
  11. This secret and public key copy URl paste Secret and public key filed and click Save Changes button admob
  12. Now come back to Application source code..
  13. Open lib/constants/strings.dart file. you paystack public get paystack account dashboard and paste Public. admob

Braintree Gateway

Follow Steps:
  1. For Braintree setup, Reference Link
  2. Sign In / Sign Up and Full Setup your acountLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search Braintree for wooCommerce then install and active this plugin. admob
  5. Redirect plugin list, click Braintree for wooCommerce payment gateway Configure Credit Card. admob
  6. Enable this gateway admob
  7. Now open your Braintree dashboard. Open setting screen then click Api keys
  8. Public key, Private key and merchant id copy. Then flow next step. admob
  9. Now back admin panel Braintree payment tab
  10. This copy data paste Public key, Private key and merchant id filed and click Save Changes button admob
  11. Now come back to Application source code..
  12. Open lib/constants/strings.dart file. you Braintree kokenization Key get paystack account dashboard and paste. admob

SSL Commerz Gateway

Follow Steps:
  1. For SSL Commerz setup, Reference Link
  2. Sign In / Sign Up and Full Setup your acountLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search SSL Commerz Payment then install and active this plugin. admob
  5. Redirect plugin list, click SSL Commerz payment gateway Settins. admob
  6. Enable this gateway
  7. Now open your SSL Commerz dashboard. Open your storeId and StorePassword copy or StoreId password find ssl commerz email
  8. Now back admin panel SSL Commerz payment tab
  9. This copy data paste StoreId and StorePassword filed and click Save Changes button
  10. Now come back to Application source code..
  11. Open lib/constants/strings.dart file. Then SSL commerz StoreId and StorePassword paste. admob

Paytm Gateway

Follow Steps:
  1. For Paytm Wordpress setup, Reference Link
  2. For Paytm Fluter setup, Reference Link
  3. Sign In / Sign Up and Full Setup your acountLink
  4. Open your admin panel dashboard screen
  5. Click Add plugin and search Paytm Payment Gateway then install and active this plugin.
  6. Redirect plugin list, click Paytm Payment Gateway Settings.
  7. Enable this gateway
  8. Now open your Paytm dashboard. Open setting screen get MerchantId and Merchant Key
  9. keyId and secret key copy. Then flow next step.
  10. Now back admin panel Paytm payment tab
  11. This copy data paste MerchantId and Merchant Key filed and click Save Changes button
  12. Now come back to Application source code..
  13. Open lib/constants/strings.dart file. you Paytm MerchantId get paystack account dashboard and paste. admob

Razorpay Gateway

Follow Steps:
  1. For Razorpay setup, Reference Link
  2. Sign In / Sign Up and Full Setup your acountLink
  3. Open your admin panel dashboard screen
  4. Click Add plugin and search Razorpay quick payments then install and active this plugin. admob
  5. Redirect plugin list, click Razorpay quick payments gateway Settings. admob
  6. Enable this gateway
  7. Now open your Razorpay dashboard. Open setting screen get keyId and secret key
  8. keyId and secret key copy. Then flow next step.
  9. Now back admin panel Razorpay payment tab
  10. This copy data paste keyId and secret key filed and click Save Changes button admob
  11. Now come back to Application source code..
  12. Open lib/constants/strings.dart file. you Razorpay keyId and secret key get paystack account dashboard and paste. admob

Setup Finishing

Follow Steps:
  1. Open your admin panel dashboard screen
  2. Click WooCommerce Setting button admob
  3. Then click Payment Tab admob
  4. Enable your needed gateway then flow next setup. Must Enable cash on delivery(default payment method for App) admob
  5. Then click Save Changes button. Now your website this payment gateway visitble. admob
  6. Now come back to Application source code..
  7. Open lib/controllers/checkout_controller.dart file. Then your website enable gateway just added this list others comments(full object comment). admob

WordPress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database referred to within WordPress as Themes.

JWT Authentication

  • 1. Open your wordpress admin panel and flow instructions JWT
  • 2. Click Add New and Search JWT
  • 3. Click Install now and then click active JWT
  • 4. Open General Settings and flow instructions JWT
  • 5. Membership checked Anyone can register and new user role set in Auther then click Save change button JWT
  • 6. Login cPanel then open your main file and find .htaccess file (Click your domain name or public_html) JWT
  • 7. Click Edit button open a new tab JWT
  • 8. Added blew data and save Change button click. Flow the instructions
     
    	<IfModule mod_rewrite.c>
    	RewriteEngine On
    	RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    	RewriteBase /
    	RewriteRule ^index\.php$ - [L]
    	RewriteCond %{REQUEST_FILENAME} !-f
    	RewriteCond %{REQUEST_FILENAME} !-d
    	RewriteRule . /index.php [L]
    	</IfModule>
    
    	# END WordPress
    	# php -- BEGIN cPanel-generated handler, do not edit
    	# Set the “ea-php74” package as the default “PHP” programming language.
    	<IfModule mime_module>
    	  AddHandler application/x-httpd-ea-php74 .php .php7 .phtml
    	</IfModule>
    	
    
    JWT
  • 6. Open your main file and find wp-config.php file (Click your domain name or public_html) JWT
  • 7. Click Edit button open a new tab JWT
  • 8. Added blew data and save Change button click. Flow the instructions
     
       define('JWT_AUTH_SECRET_KEY', 'g=lT!w-`1(B.0j! ^=qfpb/|wNB%::kI|4qwl.a=AZoJML9>C(6|v`UmUl3IC]k9');
       define('JWT_AUTH_CORS_ENABLE', true);
    	
    
    JWT

Reset Password Configuration

  • 1. Click Add New and Search - REST API Password Reset with Code JWT
  • 2. Clieck Install button Notify
  • 3. Then click Active button Notify

Meta Slider

  • 1. Search meta slider and click Install Now button Setting
  • 2. Then Active this plugin Setting
  • 3. Then click Meta Slider Menu Setting
  • 4. CLick Add Slide button Setting
  • 5. Select your slide image tab and then just click Add to slider flow the screenshot below Setting

Push Notification Setup and Configurations

  • 1. Onesignal Setup Reference: https://documentation.onesignal.com/docs/wordpress
  • 3. Open Onesignal setting page select platform Google Android app console
  • 3. Open firebase project setting and copy server and sender id app console
  • 3. Paste server key & serder id then save And Continue app console
  • 3. Select your target SDK and save And Continue app console
  • 3. Click Done button Then Flutter project Run and check notificaions app console
  • 3. Add the OneSignal APP_ID to your project, edit your project's strings.dart file: app console
  • 3. Then Flutter project Run and check notification

Shipping Config

Flat Rate Shipping is a shipping method included in WooCommerce that allows you define a standard rate per item, per shipping class, or per order.

Flat Rate Shipping works with Product Shipping Classes, adding more power and flexibility.

Setup and Configuration

To use this method it must be added to a Shipping Zone.

  • Head to: WooCommerce > Settings > Shipping.
  • 1. Open your admin panel and flow screenshot below and click Coupons- Shipping
  • 2. Then select Shipping and click Add shipping zone button Shipping
  • 3. Added shiping zone name(Same to same shipping zone name Added flow under screenshot) and added your spipping regions Shipping
  • 4. Then click Add shipping method button Shipping
  • 5. Open dailog select flat rate and click Add shipping method button Shipping
  • 6. Click Flat rate Edit button Shipping
  • 6. Added Method title(Same to same method title Added flow under screenshot) and your shipping cost then click Save cahnge button Shipping

Setup Coupon

  • 1. Open your admin panel and flow screenshot below and click Coupons- Coupon
  • 2. Then add coupon button- Coupon add
  • 3. Must added coupon code, coupon descriptions, discount type, coupon amount, coupon expiry date and must added Usage limit Usage limit per coupon and Usage limit per user this coupon. Coupon Coupon

Change Setting

  • 1. Open your admin panel and flow screenshot below and click Settings- Setting
  • 2. Select General tab and then Store Address info hare then flow below instructions Setting
  • 3. Then Enable Coupon code use and select Currency then click Save change: Setting
  • 4. Select Payment tab and then just Enable cash on delivery then click Save change: Setting
  • 5. Select Account & Privacy tab and then just Enable mark options flow the screenshot below Setting
  • 6. Then click Save change: Setting
  • 7. Select Advanced options but don’t change. Need the same field name. Setting Setting

Add some code functions.php your wordpress admin panel

  • 1. Open functions.php screen Wordpress Function Wordpress Function
  • 2. Then Copy the following code
                                            
    
        //Register custom funtions
        add_action('rest_api_init', 'wp_rest_user_endpoints');
        /**
            * Register a new user
            *
            * @param  WP_REST_Request $request Full details about the request.
            * @return array $args.
            **/
        function wp_rest_user_endpoints($request) {
            /**
            * Handle Register User request.
            */
            register_rest_route('wp/v2', 'users/register', array(
            'methods' => 'POST',
            'callback' => 'wc_rest_user_endpoint_handler',
            ));
        }
        function wc_rest_user_endpoint_handler($request = null) {
            $response = array();
            $parameters = $request->get_json_params();
            $username = sanitize_text_field($parameters['username']);
            $email = sanitize_text_field($parameters['email']);
            $password = sanitize_text_field($parameters['password']);
            // $role = sanitize_text_field($parameters['role']);
            $error = new WP_Error();
            if (empty($username)) {
            $error->add(400, __("Username field 'username' is required.", 'wp-rest-user'), array('status' => 400));
            return $error;
            }
            if (empty($email)) {
            $error->add(401, __("Email field 'email' is required.", 'wp-rest-user'), array('status' => 400));
            return $error;
            }
            if (empty($password)) {
            $error->add(404, __("Password field 'password' is required.", 'wp-rest-user'), array('status' => 400));
            return $error;
            }
            // if (empty($role)) {
            //  $role = 'subscriber';
            // } else {
            //     if ($GLOBALS['wp_roles']->is_role($role)) {
            //      // Silence is gold
            //     } else {
            //    $error->add(405, __("Role field 'role' is not a valid. Check your User Roles from Dashboard.", 'wp_rest_user'), array('status' => 400));
            //    return $error;
            //     }
            // }
            $user_id = username_exists($username);
            if (!$user_id && email_exists($email) == false) {
            $user_id = wp_create_user($username, $password, $email);
            if (!is_wp_error($user_id)) {
                // Ger User Meta Data (Sensitive, Password included. DO NOT pass to front end.)
                $user = get_user_by('id', $user_id);
                // $user->set_role($role);
                $user->set_role('subscriber');
                // WooCommerce specific code
                if (class_exists('WooCommerce')) {
                $user->set_role('customer');
                }
                // Ger User Data (Non-Sensitive, Pass to front end.)
                $response['code'] = 200;
                $response['message'] = __("User '" . $username . "' Registration was Successful", "wp-rest-user");
            } else {
                return $user_id;
            }
            } else {
            $error->add(406, __("Email already exists, please try 'Reset Password'", 'wp-rest-user'), array('status' => 400));
            return $error;
            }
            return new WP_REST_Response($response, 123);
        }
    
    
        //JWT add token and id
        function jwt_auth_function($data, $user) { 
            $data['user_role'] = $user->roles; 
            $data['user_id'] = $user->ID;
            $data['first_name'] = $user->first_name;
            $data['last_name'] = $user->last_name;
            $data['avatar']= get_avatar_url($user->ID);
            return $data; 
        } 
        add_filter( 'jwt_auth_token_before_dispatch', 'jwt_auth_function', 10, 2 );
    
    
        function post_featured_image_json( $data, $post, $context ) {
            $featured_image_id = $data->data['featured_media']; // get featured image id
            $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'original' ); // get url of the original size
    
            if( $featured_image_url ) {
            $data->data['featured_image_url'] = $featured_image_url[0];
            }
    
            return $data;
        }
        add_filter( 'rest_prepare_post', 'post_featured_image_json', 10, 3 );
                                        

    And Paste Here.

    Wordpress Function
  • 3. Click the update file button. Wordpress Function

Mobile

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 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.

Change Package Name

This is very important. Your app cannot have the same package name as other apps. If it does, the play store will not accept it as an unique application. So rename your app according to your business/brand name.Try to write an unique package name.

Naming convention : https://docs.oracle.com/javase/tutorial/java/package/namingpkgs.html

For example
  • Let’s say your package is : com.rmb.ournews And your app name is "Our News"
  • Run this command inside your flutter project root.
  • Run the command in android studio terminal :
    • futter pub run rename --bundleId com.rmb.ournews
    • futter pub run rename --appname "Our News"

Try uninstalling the app from the emulator , then run the commands and then restart the app. If it does not work, first uninstall, then restart the app then run the commands.

In IOS:

for package name just change in build build.gradle only (android/app/build.gradle)

defaultConfig { applicationId "bundleId com.rmb.ournews" ……………... }
In Android:

Change the bundle identifier from your Info.plist file inside your ios/Runner directory.

CFBundleIdentifier bundleId com.onatcipli.networkUpp

If you face issues consult a flutter developer

Theme Config

This helps you change your app’s colors according to your theme/branding Open lib/constants/colors_data.dart You can change the kPrimaryColor, kSecondaryColor variable. Flutter by default does not support hex color. Do not change the other variables. See the Screenshot below

Use https://www.rapidtables.com/convert/color/hex-to-rgb.html To get the RGB value if you do not already know your theme’s RGB color. You should keep the Opacity value 1 (Opacity can be 0, 0.1, 0.2, …….. ,0.9 ,1) See the screenshot below.

color codes

Configure the launcher icon

This helps you change your app’s launcher icon.
  • Change the logo.png in the assets/images folder with your own logo.
  • Your file name should also be logo.png and it should be a 512x512 png image.
  • The image format should be the same.
logo
  • After replacing the file , uninstall your app from your emulator.Otherwise the logo will not be changed.
  • Then in your android studio terminal run: flutter pub get
  • Then run flutter pub run flutter_launcher_icons:main
  • Then run your app (shift +10). The app will be installed again with your given launcher icon.

Configure other logos

In the asset folders we have other logos that you may want to change according to your branding.

home screen
  • This logos will be found in : assets/images/home_logo.png (100x100)
  • Change this logo with your own logo.File name , image format and size should be the same for each logo.
  • Then in your android studio terminal run: flutter pub get
  • Then restart your app (shift +10). You should see your own logo in these places.

Woo-commerce Rest Api Setup

  • 1. .Open your admin panel and flow screenshot below and click Settings- WooCommerce Rest APi
  • 2. Select Advanced tab then click REST API WooCommerce Rest APi
  • 3. Add key details description field name, permissions selected and click Generate api key Save change: WooCommerce Rest APi
  • 4. Then copy Consumer key and Consumer secret then Again open Android studio WooCommerce Rest APi
  • 5. Open Android studio project - \lib\constants\strings.dart file and paste Consumer key and Consumer secret WooCommerce Rest APi

Error Solved

  • 1. \lib\view\checkout\checkout_home_screen.dart class open long press mouse middle wheel Error
  • 2. Then https://akaarit.com/csc_picker.dart click and click Download file and copy and paste code. Error
  • 3. Then in your android studio terminal run: flutter pub get.
  • 4. Then restart your app (shift +10). You should see your own logo in these places.

Social Login

Social Login is single sign-on for end users. Using existing login information from a social network provider like Facebook, Twitter, or Google, the user can sign into a third party app instead of creating a new account specifically for that App. This simplifies registrations and logins for end users.

Facebook

Package Used : https://pub.dev/packages/futter_facebook_login

See its documentation and steps:

Google

Package Used : https://pub.dev/packages/google_sign_in

See its documentation and steps:

These files below are already configured:

firebase
firebase

You will need to generate your own google-services.json. Do not use ours - it will not work for you

firebase

Firebase console: https://console.frebase.google.com/u/0/

Follow the guideline from here https://pub.dev/packages/google_sign_in

FAQs

Section intro goes here. You can list all your FAQs using the format below.

FAQ About Apps

How About Woogoods?

Woodgoods Shop Flutter App is all about creating a ecommerce related accessories selling mobile app for Shopkeepers and businesses.

Is it compatible with all android version?

Android is designed to run on many different types of devices, from phones to tablets and televisions. As a developer, the range of devices provides a huge potential audience for your app. In order for your app to be successful on all these devices, it should tolerate some feature variability and provide a flexible user interface that adapts to different screen configurations.

Is it compatible with all iOS version?

Restricting stories significantly limits the variety of stories that appear in the Today feed and all other feeds. For example, if you restrict stories and follow only one entertainment-related channel, your Entertainment topic feed will contain stories only from that channel. When you restrict stories, you don’t see Top Stories and Trending Stories

Future Update

Can We Have Update?

Apps installed via Google Play download app updates automatically. Users receive a push notification that an app has updated. iOS prompts users to download updates through app store badging.

Would New Update Demand Charge?

If you really only want updates from your regional newspaper, go ahead and download that dedicated app. But for news stories from around the world and across topics including entertainment, science, tech, politics, and beyond, find yourself the best news app for you that's customizable.

Customization Cost?

This Apps adds a “level cost text” field to Membership Levels and Discount Codes, allowing you to override PMPro’s default level cost text. You can also modify the cost text globally via Advanced Settings. Please use with care as sometimes the level cost text is the only way a user will know how much their credit card is being charged.