Version: 1.1.3

Flutter

All function details are mentioned detaily in mobile section. This section includes platform specific codes.

1. Importing WebView#

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_inappwebview: ^4.0.0+4

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

2. Building Webview#

You can see very simple usage of our plugin. Webview is center of page and color buttons below. When web page is loaded init function runs with website_id parameters. Without these information plugin does not works

String url = 'https://devphotomakeup.pulpoar.com'; //website url

String cmd = """
          origin = 'http://127.0.0.1:8000';
          initProducts('af648582-1346-45e0-bea2-f872c7a84c6d', origin);
          activeProduct = {"Lipstick": "Pulpoar Lipstick 01", "makeupType":["Lipstick"], "makeupMode":0}
          set_active_products(JSON.stringify(activeProduct))
          """;

  void evaluateJS(String command) {
    inAppWebViewController.evaluateJavascript(source: command);
  }
  
InAppWebViewController inAppWebViewController; // webview  controller reference

  _makeUIView(BuildContext context) {
    return Container(
        height: MediaQuery.of(context).size.height * 0.8,
        child: InAppWebView(
          initialUrl: url, // takes url
          onWebViewCreated: (InAppWebViewController controller) {
            inAppWebViewController = controller;
          },
          onLoadStop: (InAppWebViewController controller, String url) {
            setState(() {
              evaluateJS(cmd); // this command should be execute after load ends
            });
          },
        ));
  }

Customize Functions

         changeBackgroundColor('#D0D1D2') 

         changeTryLabel('TRY IT NOW') 

         changeChoosModelColorAndLabel('Choose Model', '#D0D1D2') 

         functionchangeTakePhotoWithAppButtonColorAndLabel('Take a Photo', '#D0D1D2')

         applyToSelectedModel(selectedModel)

         hideChooseModelButton()

         hideTakePhotoWithAppButton()

         showBeforeAfterLabels()

You can set first product in 2 different ways.

You can use product name

activeProduct = {"Lipstick": "Pulpoar Lipstick 01", "makeupType":["Lipstick"], "makeupMode":0}
          set_active_products(JSON.stringify(activeProduct))

You can use product code

activeProduct = {"code": "********", "makeupType":["Lipstick"], "makeupMode":0 }
set_active_products_by_code(JSON.stringify(activeProduct));

3. Apply Products#

There is two option to apply any product. You can use product code or product name that consist of brand name, product name and color name.

Apply Product With Code

//  applyProduct with product uid
              evaluateJS("applyProductWithCode('*********')");

Apply Product With Product Name

// applyProduct with product name
// productname = brandname + " " + "product name" + "color_name";
             evaluateJS(
                """
                     applyProduct('Lipstick','"Pulpoar Lipstick 01"')
                """
              // );

Optional Model Class Designed For Demo App

// model class for demo app

class Product {
  String name;
  String category;
  String color;
  String code;
  String uid;

  Product(String name, String category, String code,String color, String uid) {
    this.name = name;
    this.category = category;
    this.code = code;
    this.color = color;
    this.uid = uid;
  }
}

And Our Color Buttons With Products

Product p1 = new Product("Pulpoar Lipstick 01", "Lipstick","l01", "#8d2152", "product_code");

Product p2 = new Product("Pulpoar Lipstick 02", "Lipstick","l02", "#A4585E", "product_code");

Product p3 = new Product("Pulpoar Lipstick 3","Lipstick","l03","#7f081d","product_code");

Product p4 = new Product("Pulpoar Blusher 01","Blusher","b01","#f27a51","product_code");

Product p5 = new Product("Pulpoar Eyeliner 01","Eyeliner","e01", "#000000", "product_code");

Product p6 = new Product("Pulpoar Foundation 01", "Foundation", "f01", "#DFBBA1", "product_code");


  _makeUIColors(BuildContext context, List<Product> list) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: list.length,
        itemBuilder: (context, index) {
          var colorList = List<int>.generate(list.length, (colorIndex) => colorIndex = int.parse("0xFF${list[index].color.substring(1)}"));
          return GestureDetector(
            // add action to apply products
            onTap: () {
              // applyProduct with product name
              // productname = brandname + " " + "product name" + "color_name";
              
              // evaluateJS(
              //   """
              //        applyProduct('${list[index].category}','${list[index].name}')

              //   """
              // );

              //  applyProduct with product uid
              evaluateJS("applyProductWithCode('${list[index].uid}')");
            },
            child: Container(
              alignment: Alignment.bottomCenter,
              height: MediaQuery.of(context).size.width * 0.15,
              width: MediaQuery.of(context).size.width * 0.15,
              margin: EdgeInsets.all(8),
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Color(colorList[index])),
            ),
          );
        },
      ),
    );
  }

Sample App Source Code :

//
// Copyright (c) PulpoAR
// PhotoMakeUp Flutter Demo Project
//

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter/material.dart';


import 'package:DemoPulpoAr/product.dart';


Product p1 = new Product("Pulpoar Lipstick 01", "Lipstick","l01", "#8d2152", "product_code");

Product p2 = new Product("Pulpoar Lipstick 02", "Lipstick","l02", "#A4585E", "product_code");

Product p3 = new Product("Pulpoar Lipstick 3","Lipstick","l03","#7f081d","product_code");

Product p4 = new Product("Pulpoar Blusher 01","Blusher","b01","#f27a51","product_code");

Product p5 = new Product("Pulpoar Eyeliner 01","Eyeliner","e01", "#000000", "product_code");

Product p6 = new Product("Pulpoar Foundation 01", "Foundation", "f01", "#DFBBA1", "product_code");

InAppWebViewController inAppWebViewController; // webview  controller reference

String url = 'https://devphotomakeup.pulpoar.com'; //website url

//Javascript command will compile after website loaded
String cmd = """
          origin = 'http://127.0.0.1:8000';
          initProducts('af648582-1346-45e0-bea2-f872c7a84c6d', origin);
          activeProduct = {"Lipstick": "Pulpoar Lipstick 01", "makeupType":["Lipstick"], "makeupMode":0}
          set_active_products(JSON.stringify(activeProduct))
          """;

class DemoPulpoAR extends StatefulWidget {
  @override
  _DemoPulpoARState createState() => _DemoPulpoARState();
}

class _DemoPulpoARState extends State<DemoPulpoAR> {
  @override
  Widget build(BuildContext context) {
    List<Product> productList = new List<Product>(); // list of products
    List<Color> colorList = new List<Color>();
    productList.add(p1);
    productList.add(p2);
    productList.add(p3);
    productList.add(p4);
    productList.add(p5);
    productList.add(p6);

    return Scaffold(
      body: Container(
        child: Column(
          children: [
            _makeUIView(context), // -> webview
            _makeUIColors(context, productList), // -> color buttons
          ],
        ),
      ),
    );
  }

  _makeUIView(BuildContext context) {
    return Container(
        height: MediaQuery.of(context).size.height * 0.8,
        child: InAppWebView(
          initialUrl: url, // takes url
          onWebViewCreated: (InAppWebViewController controller) {
            inAppWebViewController = controller;
          },
          onLoadStop: (InAppWebViewController controller, String url) {
            setState(() {
              evaluateJS(cmd); // this command should be execute after load ends
            });
          },
        ));
  }

  void evaluateJS(String command) {
    inAppWebViewController.evaluateJavascript(source: command);
  }

  void goBack() {
    // webview commands can be added
    inAppWebViewController.goBack();
  }

  _makeUIColors(BuildContext context, List<Product> list) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: list.length,
        itemBuilder: (context, index) {
          var colorList = List<int>.generate(list.length, (colorIndex) => colorIndex = int.parse("0xFF${list[index].color.substring(1)}"));
          return GestureDetector(
            // add action to apply products
            onTap: () {
              // applyProduct with product name
              // productname = brandname + " " + "product name" + "color_name";
              //  applyProduct('Blusher','Flormar BAKED BLUSH-ON 044 PINK BRONZE')
              // evaluateJS(
              //   """
              //        applyProduct('${list[index].category}','${list[index].name}')

              //   """
              // );

              //  applyProduct with product uid
              evaluateJS("applyProductWithCode('${list[index].uid}')");
            },
            child: Container(
              alignment: Alignment.bottomCenter,
              height: MediaQuery.of(context).size.width * 0.15,
              width: MediaQuery.of(context).size.width * 0.15,
              margin: EdgeInsets.all(8),
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Color(colorList[index])),
            ),
          );
        },
      ),
    );
  }
}

caution

Provide camera permission to capture photo

Result:

Screenshot

You can request sample project from here).