'how to use html and javascript code in flutter

I have to generate a popup in flutter that is coming from backend in the html, css and javascript form

In my case I'm using a korean based software named Band that is going to provide me google, fb and band login.

It's working is something like passport.js just in my case I've to use band but the issue is that when I try to render the response, the flutter is treating javascript as string.

Band developers guide link

Using band api I have got the response in html and javascript, something like given below 

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<meta name="keywords" content="BAND" />
<meta name="description" content="밴드 방문을 환영합니다. 로그인하고 그룹 멤버들과 대화에 참여해 보세요." />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>로그인 | 밴드</title>
<script type="text/javascript">...</script>
</head>

<body>...</body>

</html>

Preview of response using postman software

band api response in html and javascript

Code snippet I'm using in flutter to render the response is given below

Future getJSONData() async 
    {
        var redirectUri = Uri.encodeFull("apiredirection.php");
        var response = await http.get(
        Uri.encodeFull(
        "https://auth.band.us/oauth2/authorize?redirect_uri={TEST_URL}" +
        redirectUri),
        headers: {"Accept": "application/text"});  

        this.setState(() {
        data = response.body;    
        return data;
        });
            return data;
    }

    @override
    Widget build(BuildContext context) 
    {
        String html = data.toString();    
        return new MaterialApp(
        home: new Scaffold(
        body: new Container(
        child: new HtmlView(
        data: html),),),),    
    }
javascripthtmlflutterdart


Solution 1:[1]

If the response that you need to display is in html String, you can use webview_flutter to render this on your app with a WebView.

// Let htmlData contain the html response
String htmlData = '''<!DOCTYPE html><html>...</html>''';

await webViewController.loadHtmlString(htmlData);

Then set webViewController as the WebViewController of your WebView.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Omatt

Related Questions