Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 875 forks source link

Html response is not getting as expected. #1106

Closed Sunsiha closed 2 years ago

Sunsiha commented 2 years ago

Am getting a response as html content. So when am trying to load that HTML content few things are missing; like radio button, checkbox, input type etc. The following html i tried;


    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>form</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body{
  font-family: "regularFont" !important;
}
.form-input {
   background: #EFF0F6; 
    width: 97%;
    font: inherit;
    letter-spacing: inherit;
    color: currentColor;
    padding: 4px 0 5px;
    border: 0;
    box-sizing: content-box;
    height: 1.4375em;
    margin: 0;
    border-radius: 5px;
}
.table-form-input{
background: #EFF0F6; 
 border: none;
 height: 5vh;
 width: 20%;
 padding: 5px 15px;
 margin: 10px 0;
}
.primary-color{
    color: #262626
}
.secondary-color{
    color: #696871;
}
table{
  border-spacing: 0;
}
table, tr, th {
  text-align: left;
  font-size: 16px;
  color: #4F4F4F;
  font-weight: normal;
  padding: 15px 0;
}
table, tr, td {
  font-size: 14px;
  color: #1F1F1F;
 padding: 15px 10px 15px 10px;
}
.container {
  display: flex;
  position: relative;
  padding:0px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  justify-content: center;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  /*top: 0;
  left: 0; */
  height: 15px;
  width: 15px;
  border: 2px solid #828282;
  border-radius: 50%;
  align-items: center;
    text-align: center;
    justify-content: center;
    display: block;

}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ffffff;
  border: 1px solid #445BC7;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
       top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #445BC7;
}

/* checkbox */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-check {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #1f1f1f;
  border-radius: 5px;
  margin-top: 6px;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark-check {
  background-color: #445BC7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark-check:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark-check:after {
 left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

tr:nth-child(even) {
  background-color:rgba(105, 104, 113, 0.07);
}

td:nth-child(1) {
  width: 55%;
}

.text-center{
text-align: center;
}

.align-item-center-table{
  text-align: center;
    justify-content: center;
    vertical-align: middle;
}

.display-flex{
  display: flex;
}

</style>

<h3 style="margin-top: 0px;margin-bottom: 10px; font-size: 24px;">Administrative Assistant Skills Checklist</h3>

<form id="skillChecklistForm">
    <div style="display: flex;">
        <div style="padding: 10px; padding-left: 0;">
             <label style="color: #1f1f1f;font-size: 14px;" for="fname">First Name</label>
       <input class="form-input" type="text" name="fname" value="Sunisha"><br>
        </div>

<div style="padding: 10px;">
     <label style="color: #1f1f1f;font-size: 14px;" for="lname">Last Name</label>
   <input class="form-input" type="text" name="lname" value="Guptan"><br>
</div>

<div style="padding: 10px;">
      <label style="color: #1f1f1f;font-size: 14px;" for="cdate">Date</label>
    <input class="form-input" style="width:90%" type="text" name="cdate" value="Jul 12, 2022"><br>
</div>

</div>

<div style="display: flex;">
    <div style="padding: 10px;  padding-left: 0;">
        <p style="font-size: 12px; font-weight: bold">
            Key:
        </p>
    </div>
    <div style="padding: 10px;">
        <p style="font-size: 12px;">1   = No Experience</p>
        <p style="font-size: 12px;">2   = Need Training</p>
        <p style="font-size: 12px;">3   = Able to perform with supervision</p>
        <p style="font-size: 12px;">4   = Able to perform independently</p>
    </div>
</div>

<div>
    <p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; font-size: 16px; padding: 10px 0;">Administration</p>
    </div>

    <div>
        <table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th>Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>A</td>
    <td><label class="container"><input type="radio" name="q1" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="2" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>B</td>
    <td><label class="container"><input type="radio" name="q2" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="4"><span class="checkmark"></span></label></td>
  </tr>

   <tr>
    <td>C</td>
    <td><label class="container"><input type="radio" name="q3" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>D</td>
    <td><label class="container"><input type="radio" name="q4" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>E</td>
    <td><label class="container"><input type="radio" name="q5" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>F</td>
    <td><label class="container"><input type="radio" name="q6" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="4"><span class="checkmark"></span></label></td>
  </tr>

</tbody></table>
    </div>

    <div>
    <p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; padding: 10px 0;">Reception/Customer Service</p>
    </div>

    <div>
        <table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th style="font-size: 16px;">Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>Multi-Line Phones </td>
    <td><label class="container"><input type="radio" name="q14" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>Customer Service  </td>
    <td><label class="container"><input type="radio" name="q15" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="4"><span class="checkmark"></span></label></td>
  </tr>

</tbody></table>

</form>

Current output:

Screenshot 2022-07-12 at 11 55 28 PM Screenshot 2022-07-12 at 11 55 43 PM

Expected output:

Screenshot 2022-07-12 at 11 59 23 PM

Code:

import 'dart:developer';

import 'package:dsaas/constants/colors/simplify_colors.dart';
import 'package:dsaas/constants/strings/strings.dart';
import 'package:dsaas/constants/style_sheets/style_sheets.dart';
import 'package:dsaas/globals/global_widgets/get_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_table/flutter_html_table.dart';

class ViewCheckListScreen extends StatefulWidget {
  String htmlTemplate;

  ViewCheckListScreen({Key? key, required this.htmlTemplate}) : super(key: key);

  @override
  _ViewCheckListScreenState createState() => _ViewCheckListScreenState();
}

class _ViewCheckListScreenState extends State<ViewCheckListScreen> {
  final GlobalKey _previewContainer = GlobalKey();
  String dataHtml=r"""
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>form</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body{
  font-family: "regularFont" !important;
}
.form-input {
   background: #EFF0F6; 
    width: 97%;
    font: inherit;
    letter-spacing: inherit;
    color: currentColor;
    padding: 4px 0 5px;
    border: 0;
    box-sizing: content-box;
    height: 1.4375em;
    margin: 0;
    border-radius: 5px;
}
.table-form-input{
background: #EFF0F6; 
 border: none;
 height: 5vh;
 width: 20%;
 padding: 5px 15px;
 margin: 10px 0;
}
.primary-color{
    color: #262626
}
.secondary-color{
    color: #696871;
}
table{
  border-spacing: 0;
}
table, tr, th {
  text-align: left;
  font-size: 16px;
  color: #4F4F4F;
  font-weight: normal;
  padding: 15px 0;
}
table, tr, td {
  font-size: 14px;
  color: #1F1F1F;
 padding: 15px 10px 15px 10px;
}
.container {
  display: flex;
  position: relative;
  padding:0px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  justify-content: center;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  /*top: 0;
  left: 0; */
  height: 15px;
  width: 15px;
  border: 2px solid #828282;
  border-radius: 50%;
  align-items: center;
    text-align: center;
    justify-content: center;
    display: block;

}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ffffff;
  border: 1px solid #445BC7;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
       top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #445BC7;
}

/* checkbox */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-check {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #1f1f1f;
  border-radius: 5px;
  margin-top: 6px;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark-check {
  background-color: #445BC7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark-check:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark-check:after {
 left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

tr:nth-child(even) {
  background-color:rgba(105, 104, 113, 0.07);
}

td:nth-child(1) {
  width: 55%;
}

.text-center{
text-align: center;
}

.align-item-center-table{
  text-align: center;
    justify-content: center;
    vertical-align: middle;
}

.display-flex{
  display: flex;
}

</style>

<h3 style="margin-top: 0px;margin-bottom: 10px; font-size: 24px;">Checklist</h3>

<form id="skillChecklistForm">
    <div style="display: flex;">
        <div style="padding: 10px; padding-left: 0;">
             <label style="color: #1f1f1f;font-size: 14px;" for="fname">First Name</label>
       <input class="form-input" type="text" name="fname" value="Sunisha"><br>
        </div>

<div style="padding: 10px;">
     <label style="color: #1f1f1f;font-size: 14px;" for="lname">Last Name</label>
   <input class="form-input" type="text" name="lname" value="Guptan"><br>
</div>

<div style="padding: 10px;">
      <label style="color: #1f1f1f;font-size: 14px;" for="cdate">Date</label>
    <input class="form-input" style="width:90%" type="text" name="cdate" value="Jul 12, 2022"><br>
</div>

</div>

<div style="display: flex;">
    <div style="padding: 10px;  padding-left: 0;">
        <p style="font-size: 12px; font-weight: bold">
            Key:
        </p>
    </div>
    <div style="padding: 10px;">
        <p style="font-size: 12px;">1   = No Experience</p>
        <p style="font-size: 12px;">2   = Need Training</p>
        <p style="font-size: 12px;">3   = Able to perform with supervision</p>
        <p style="font-size: 12px;">4   = Able to perform independently</p>
    </div>
</div>

<div>
    <p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; font-size: 16px; padding: 10px 0;">Administration</p>
    </div>

    <div>
        <table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th>Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>A</td>
    <td><label class="container"><input type="radio" name="q1" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="2" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>B</td>
    <td><label class="container"><input type="radio" name="q2" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="4"><span class="checkmark"></span></label></td>
  </tr>

   <tr>
    <td>C</td>
    <td><label class="container"><input type="radio" name="q3" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>D</td>
    <td><label class="container"><input type="radio" name="q4" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>E</td>
    <td><label class="container"><input type="radio" name="q5" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>F</td>
    <td><label class="container"><input type="radio" name="q6" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="4"><span class="checkmark"></span></label></td>
  </tr>

</tbody></table>
    </div>

    <div>
    <p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; padding: 10px 0;">Reception/Customer Service</p>
    </div>

    <div>
        <table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th style="font-size: 16px;">Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>Multi-Line Phones </td>
    <td><label class="container"><input type="radio" name="q14" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>Customer Service  </td>
    <td><label class="container"><input type="radio" name="q15" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="4"><span class="checkmark"></span></label></td>
  </tr>

</tbody></table>

</form>""";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    log('template:=====>>>${widget.htmlTemplate}');

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: AppColors.white,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(MediaQuery.of(context).padding.top + 25),
        child: getAppBarWithBackArrow(
            context: context,
            previewContainer: _previewContainer,
            title: Strings.m081,
            appBarColor: AppColors.white),
      ),
      body: SingleChildScrollView(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            child: Html(
                data: dataHtml,
                style: {"body": AppStyle().htmlStyle},
                tagsList: Html.tags
                  ..addAll(['table', "form", "label", "input","radio","form-input","container"]),
                customRenders: {
                  tableMatcher(): tableRender(),
                },),
          ),
        ],
      )),
    );
  }
}

Plugin versions:

flutter_html: ^3.0.0-alpha.2
  flutter_html_table: ^3.0.0-alpha.3

Flutter version:

Flutter 3.0.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 85684f9300 (12 days ago) • 2022-06-30 13:22:47 -0700
Engine • revision 6ba2af10bb
Tools • Dart 2.17.5 • DevTools 2.12.2
erickok commented 2 years ago

HTML input elements aren't directly supported and we have no plan really to do so, as it typically also means posting somewhere and it just all becomes out of the scope of this library. See also #599 which includes an example on how to use a custom render to add support for input elements yourself.