Version: 1.1.4

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 = {"********"}
          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
            });
          },
        ));
  }

You can use product code

activeProduct = {"********"}
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

evaluateJS("applyProductWithCode('*********')");

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 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 = {"********"}
          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 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.