freekake basename
This commit is contained in:
='fauz
@@ -3,14 +3,14 @@ import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:furibase/components/card_list.dart';
|
||||
import 'package:furibase/components/collection_container%20copy.dart';
|
||||
// import 'package:furibase/components/main_menu.dart';
|
||||
// import 'package:furibase/components/topbar_container.dart';
|
||||
import 'package:furibase/helpers/color_helper.dart';
|
||||
import 'package:freekake/components/card_list.dart';
|
||||
import 'package:freekake/components/collection_container%20copy.dart';
|
||||
// import 'package:freekake/components/main_menu.dart';
|
||||
// import 'package:freekake/components/topbar_container.dart';
|
||||
import 'package:freekake/helpers/color_helper.dart';
|
||||
import 'package:list_detail_extension/list_detail_extension.dart';
|
||||
|
||||
// import 'package:furibase/screen/pustaka/pustaka_detail_screen.dart';
|
||||
// import 'package:freekake/screen/pustaka/pustaka_detail_screen.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
|
||||
@@ -85,7 +85,7 @@ class _ListEducationState extends State<ListEducation> {
|
||||
}
|
||||
|
||||
void _loadContent(String path) async {
|
||||
if (_shouldShowWebView && _controller != null) {
|
||||
if (_shouldShowWebView) {
|
||||
if (path.startsWith('http')) {
|
||||
// Load dari Internet
|
||||
_controller.loadRequest(Uri.parse(path));
|
||||
@@ -124,8 +124,8 @@ class _ListEducationState extends State<ListEducation> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
String _searchQuery = "";
|
||||
final List<Map<String, dynamic>> _collections = [
|
||||
String searchQuery = "";
|
||||
final List<Map<String, dynamic>> collections = [
|
||||
{
|
||||
"label": "Kesehatan",
|
||||
"image": "assets/icons/healthy.svg",
|
||||
@@ -153,14 +153,14 @@ class _ListEducationState extends State<ListEducation> {
|
||||
];
|
||||
|
||||
final List<Map<String, dynamic>> filteredCollections =
|
||||
_collections
|
||||
collections
|
||||
.where(
|
||||
(item) => item["label"].toLowerCase().contains(
|
||||
_searchQuery.toLowerCase(),
|
||||
searchQuery.toLowerCase(),
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
if (_shouldShowWebView && _controller != null) {
|
||||
if (_shouldShowWebView) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Color.fromARGB(225, 79, 76, 182),
|
||||
@@ -174,215 +174,10 @@ class _ListEducationState extends State<ListEducation> {
|
||||
body: Column(
|
||||
children: [
|
||||
// Header Section
|
||||
Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: 150,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(225, 79, 76, 182),
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(25),
|
||||
bottomRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 6,
|
||||
),
|
||||
child: Container(
|
||||
height: 47,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Colors.grey.shade200,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.search,
|
||||
color: Color.fromARGB(137, 180, 172, 172),
|
||||
size: 18,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged:
|
||||
filterSearch, // Memanggil filter saat mengetik
|
||||
style: const TextStyle(
|
||||
color: Colors.black,
|
||||
fontSize: 14,
|
||||
),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'Cari pelajaran...',
|
||||
hintStyle: TextStyle(color: Colors.black54),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (searchController.text.isNotEmpty)
|
||||
IconButton(
|
||||
icon: const Icon(
|
||||
Icons.close,
|
||||
color: Colors.black54,
|
||||
),
|
||||
onPressed: () {
|
||||
searchController.clear();
|
||||
filterSearch('');
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children:
|
||||
filteredCollections.map((item) {
|
||||
return CollectionContainer(
|
||||
label: item["label"]!,
|
||||
imageSvg: item["image"]!,
|
||||
iconw: 20,
|
||||
iconh: 20,
|
||||
width: 70,
|
||||
height: 70,
|
||||
textColor: Colors.black,
|
||||
lblSize: 10,
|
||||
colorContiner: ColorHelper.hexToColor(
|
||||
item["color"],
|
||||
),
|
||||
onTapAc:
|
||||
() => {
|
||||
searchController.clear(),
|
||||
filterByCategory(item["category"]),
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
headerContainer(context, filteredCollections),
|
||||
// Collection Items dengan Filter
|
||||
SizedBox(height: 20),
|
||||
Expanded(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(223, 200, 200, 206),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(25),
|
||||
topRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(height: 5),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: MediaQuery.of(context).size.width / 4,
|
||||
),
|
||||
child: Divider(
|
||||
color: const Color.fromARGB(255, 255, 255, 255),
|
||||
thickness: 2,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
// vertical: 10,
|
||||
),
|
||||
child:
|
||||
filteredItems.isEmpty
|
||||
? const Center(
|
||||
child: Text(
|
||||
"Tidak ada hasil",
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.black54,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 10.0,
|
||||
left: 10,
|
||||
right: 10,
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20),
|
||||
topRight: Radius.circular(20),
|
||||
),
|
||||
color: const Color.fromARGB(
|
||||
255,
|
||||
222,
|
||||
181,
|
||||
133,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 12,
|
||||
right: 20,
|
||||
left: 20,
|
||||
),
|
||||
child: GridView.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 1, // 2 Kolom
|
||||
crossAxisSpacing: 10,
|
||||
mainAxisSpacing: 10,
|
||||
childAspectRatio: 2.5,
|
||||
),
|
||||
itemCount: _listContent.length,
|
||||
itemBuilder: (context, index) {
|
||||
return GestureDetector(
|
||||
child: CardList(
|
||||
title:
|
||||
_listContent[index]["title"] ??
|
||||
"",
|
||||
body:
|
||||
_listContent[index]["body"] ??
|
||||
"",
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(
|
||||
context,
|
||||
) => listDetailExtension.buildPage({
|
||||
'title':
|
||||
filteredItems[index]['category'],
|
||||
'imagePath':
|
||||
filteredItems[index]['image'],
|
||||
'filepath':
|
||||
filteredItems[index]['file'],
|
||||
'paragraphs':
|
||||
"""
|
||||
""" +
|
||||
"<h1> ${_listContent[index]["title"]} </h1> <p> ${_listContent[index]["body"]}",
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(child: contentContainer(context)),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -395,4 +190,194 @@ class _ListEducationState extends State<ListEducation> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Container headerContainer(
|
||||
BuildContext context,
|
||||
List<Map<String, dynamic>> filteredCollections,
|
||||
) {
|
||||
return Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: 150,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(225, 79, 76, 182),
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(25),
|
||||
bottomRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 6),
|
||||
child: Container(
|
||||
height: 47,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Colors.grey.shade200,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.search,
|
||||
color: Color.fromARGB(137, 180, 172, 172),
|
||||
size: 18,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged: filterSearch, // Memanggil filter saat mengetik
|
||||
style: const TextStyle(color: Colors.black, fontSize: 14),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'Cari pelajaran...',
|
||||
hintStyle: TextStyle(color: Colors.black54),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (searchController.text.isNotEmpty)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close, color: Colors.black54),
|
||||
onPressed: () {
|
||||
searchController.clear();
|
||||
filterSearch('');
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children:
|
||||
filteredCollections.map((item) {
|
||||
return CollectionContainer(
|
||||
label: item["label"]!,
|
||||
imageSvg: item["image"]!,
|
||||
iconw: 20,
|
||||
iconh: 20,
|
||||
width: 70,
|
||||
height: 70,
|
||||
textColor: Colors.black,
|
||||
lblSize: 10,
|
||||
colorContiner: ColorHelper.hexToColor(item["color"]),
|
||||
onTapAc:
|
||||
() => {
|
||||
searchController.clear(),
|
||||
filterByCategory(item["category"]),
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Container contentContainer(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(223, 200, 200, 206),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(25),
|
||||
topRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(height: 5),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: MediaQuery.of(context).size.width / 4,
|
||||
),
|
||||
child: Divider(
|
||||
color: const Color.fromARGB(255, 255, 255, 255),
|
||||
thickness: 2,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
// vertical: 10,
|
||||
),
|
||||
child:
|
||||
filteredItems.isEmpty
|
||||
? const Center(
|
||||
child: Text(
|
||||
"Tidak ada hasil",
|
||||
style: TextStyle(fontSize: 16, color: Colors.black54),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 10.0,
|
||||
left: 10,
|
||||
right: 10,
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20),
|
||||
topRight: Radius.circular(20),
|
||||
),
|
||||
color: const Color.fromARGB(255, 222, 181, 133),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 12,
|
||||
right: 20,
|
||||
left: 20,
|
||||
),
|
||||
child: GridView.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 1, // 2 Kolom
|
||||
crossAxisSpacing: 10,
|
||||
mainAxisSpacing: 10,
|
||||
childAspectRatio: 2.5,
|
||||
),
|
||||
itemCount: _listContent.length,
|
||||
itemBuilder: (context, index) {
|
||||
return GestureDetector(
|
||||
child: CardList(
|
||||
title: _listContent[index]["title"] ?? "",
|
||||
body: _listContent[index]["body"] ?? "",
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(
|
||||
context,
|
||||
) => listDetailExtension.buildPage({
|
||||
'title':
|
||||
filteredItems[index]['category'],
|
||||
'imagePath':
|
||||
filteredItems[index]['image'],
|
||||
'filepath':
|
||||
filteredItems[index]['file'],
|
||||
'paragraphs':
|
||||
"""
|
||||
"""
|
||||
"<h1> ${_listContent[index]["title"]} </h1> <p> ${_listContent[index]["body"]}",
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
import 'package:freekake/components/buildcard_info.dart';
|
||||
import 'package:freekake/components/collection_container.dart';
|
||||
|
||||
class DetailScreen extends StatefulWidget {
|
||||
final String title;
|
||||
|
||||
@@ -9,12 +9,12 @@ class ListDetailScreen extends StatefulWidget {
|
||||
final String filepath;
|
||||
|
||||
const ListDetailScreen({
|
||||
Key? key,
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.imagePath,
|
||||
required this.paragraphs,
|
||||
required this.filepath,
|
||||
}) : super(key: key);
|
||||
});
|
||||
|
||||
@override
|
||||
_ListDetailScreenState createState() => _ListDetailScreenState();
|
||||
@@ -41,6 +41,11 @@ class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
String html = await DefaultAssetBundle.of(
|
||||
context,
|
||||
).loadString(widget.filepath);
|
||||
|
||||
html = html.replaceAllMapped(
|
||||
RegExp(r'<div class="gizi-grid">(.*?)</div>', dotAll: true),
|
||||
(match) => '<gizi-grid>${match.group(1)}</gizi-grid>',
|
||||
);
|
||||
setState(() {
|
||||
_htmlContent = html;
|
||||
});
|
||||
@@ -102,115 +107,73 @@ class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.only(left: 18.0, right: 18, bottom: 18),
|
||||
child:
|
||||
// ListView.builder(
|
||||
// itemCount: widget.paragraphs.length,
|
||||
// itemBuilder: (context, index) {
|
||||
// return
|
||||
// Padding(
|
||||
// padding: const EdgeInsets.only(bottom: 16.0),
|
||||
// child: Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// Expanded(
|
||||
// child:
|
||||
// // Text(
|
||||
// // widget.paragraphs[index] +
|
||||
// // style: TextStyle(color: Colors.black),
|
||||
// Html(
|
||||
// // style: {
|
||||
// // "body": Style(
|
||||
// // color: const Color.fromRGBO(0, 0, 0, 1),
|
||||
// // ),
|
||||
// // },
|
||||
// data:
|
||||
// widget.paragraphs +
|
||||
// """
|
||||
// <html>
|
||||
// <!-- Text between angle brackets is an HTML tag and is not displayed.
|
||||
// Most tags, such as the HTML and /HTML tags that surround the contents of
|
||||
// a page, come in pairs; some tags, like HR, for a horizontal rule, stand
|
||||
// alone. Comments, such as the text you're reading, are not displayed when
|
||||
// the Web page is shown. The information between the HEAD and /HEAD tags is
|
||||
// not displayed. The information between the BODY and /BODY tags is displayed.-->
|
||||
// <head>
|
||||
// <title>Enter a title, displayed at the top of the window.</title>
|
||||
// </head>
|
||||
// <!-- The information between the BODY and /BODY tags is displayed.-->
|
||||
// <body>
|
||||
// <h1>Enter the main heading, usually the same as the title.</h1>
|
||||
// <p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
|
||||
// <ul>
|
||||
// <li>The first item in your list</li>
|
||||
// <li>The second item; <i>italicize</i> key words</li>
|
||||
// </ul>
|
||||
// <p>Improve your image by including an image. </p>
|
||||
// <p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
|
||||
// <p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
|
||||
// Break up your page with a horizontal rule or two. </p>
|
||||
// <hr>
|
||||
// <p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
|
||||
// <!-- And add a copyright notice.-->
|
||||
// <p>© Wiley Publishing, 2011</p>
|
||||
// </body>
|
||||
// </html>
|
||||
// """,
|
||||
// ),
|
||||
// ),
|
||||
// // ),
|
||||
// // Checkbox(
|
||||
// // value: _readStatus[index],
|
||||
// // onChanged: (bool? value) {
|
||||
// // _toggleReadStatus(index);
|
||||
// // },
|
||||
// // ),
|
||||
// ],
|
||||
// ),
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
Html(
|
||||
style: {"body": Style(color: const Color.fromRGBO(0, 0, 0, 1))},
|
||||
// data: widget.paragraphs,
|
||||
data: _htmlContent,
|
||||
extensions: [
|
||||
TagExtension(
|
||||
tagsToExtend: {"img"},
|
||||
builder: (ExtensionContext context) {
|
||||
final attrs = context.attributes;
|
||||
final src = attrs['src'] ?? '';
|
||||
|
||||
if (src.isNotEmpty) {
|
||||
if (src.startsWith('assets/html/')) {
|
||||
return Image.asset(
|
||||
src,
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image not found'),
|
||||
);
|
||||
} else if (!src.startsWith('http')) {
|
||||
return Image.asset(
|
||||
'assets/images/$src',
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image not found'),
|
||||
);
|
||||
} else {
|
||||
return Image.network(
|
||||
src,
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image failed to load'),
|
||||
);
|
||||
}
|
||||
}
|
||||
return const SizedBox();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
// ListView.builder(
|
||||
// itemCount: widget.paragraphs.length,
|
||||
// itemBuilder: (context, index) {
|
||||
// return
|
||||
// Padding(
|
||||
// padding: const EdgeInsets.only(bottom: 16.0),
|
||||
// child: Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// Expanded(
|
||||
// child:
|
||||
// // Text(
|
||||
// // widget.paragraphs[index] +
|
||||
// // style: TextStyle(color: Colors.black),
|
||||
// Html(
|
||||
// // style: {
|
||||
// // "body": Style(
|
||||
// // color: const Color.fromRGBO(0, 0, 0, 1),
|
||||
// // ),
|
||||
// // },
|
||||
// data:
|
||||
// widget.paragraphs +
|
||||
// """
|
||||
// <html>
|
||||
// <!-- Text between angle brackets is an HTML tag and is not displayed.
|
||||
// Most tags, such as the HTML and /HTML tags that surround the contents of
|
||||
// a page, come in pairs; some tags, like HR, for a horizontal rule, stand
|
||||
// alone. Comments, such as the text you're reading, are not displayed when
|
||||
// the Web page is shown. The information between the HEAD and /HEAD tags is
|
||||
// not displayed. The information between the BODY and /BODY tags is displayed.-->
|
||||
// <head>
|
||||
// <title>Enter a title, displayed at the top of the window.</title>
|
||||
// </head>
|
||||
// <!-- The information between the BODY and /BODY tags is displayed.-->
|
||||
// <body>
|
||||
// <h1>Enter the main heading, usually the same as the title.</h1>
|
||||
// <p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
|
||||
// <ul>
|
||||
// <li>The first item in your list</li>
|
||||
// <li>The second item; <i>italicize</i> key words</li>
|
||||
// </ul>
|
||||
// <p>Improve your image by including an image. </p>
|
||||
// <p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
|
||||
// <p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
|
||||
// Break up your page with a horizontal rule or two. </p>
|
||||
// <hr>
|
||||
// <p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
|
||||
// <!-- And add a copyright notice.-->
|
||||
// <p>© Wiley Publishing, 2011</p>
|
||||
// </body>
|
||||
// </html>
|
||||
// """,
|
||||
// ),
|
||||
// ),
|
||||
// // ),
|
||||
// // Checkbox(
|
||||
// // value: _readStatus[index],
|
||||
// // onChanged: (bool? value) {
|
||||
// // _toggleReadStatus(index);
|
||||
// // },
|
||||
// // ),
|
||||
// ],
|
||||
// ),
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
htmlBody(),
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -218,4 +181,71 @@ class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
// ),
|
||||
);
|
||||
}
|
||||
|
||||
Html htmlBody() {
|
||||
return Html(
|
||||
style: {"body": Style(color: const Color.fromRGBO(0, 0, 0, 1))},
|
||||
// data: widget.paragraphs,
|
||||
data: _htmlContent,
|
||||
extensions: [
|
||||
TagExtension(
|
||||
tagsToExtend: {"img"},
|
||||
builder: (ExtensionContext context) {
|
||||
final attrs = context.attributes;
|
||||
final src = attrs['src'] ?? '';
|
||||
|
||||
if (src.isNotEmpty) {
|
||||
if (src.startsWith('assets/html/')) {
|
||||
return Image.asset(
|
||||
src,
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image not found'),
|
||||
);
|
||||
} else if (!src.startsWith('http')) {
|
||||
return Image.asset(
|
||||
'assets/images/$src',
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image not found'),
|
||||
);
|
||||
} else {
|
||||
return Image.network(
|
||||
src,
|
||||
width: 100,
|
||||
errorBuilder:
|
||||
(context, error, stackTrace) =>
|
||||
const Text('Image failed to load'),
|
||||
);
|
||||
}
|
||||
}
|
||||
return const SizedBox();
|
||||
},
|
||||
),
|
||||
TagExtension(
|
||||
tagsToExtend: {"gizi-grid"},
|
||||
builder: (context) {
|
||||
final spans = context.inlineSpanChildren ?? [];
|
||||
|
||||
final widgets =
|
||||
spans.map((span) {
|
||||
if (span is WidgetSpan) return span.child;
|
||||
return const SizedBox();
|
||||
}).toList();
|
||||
|
||||
return Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children:
|
||||
widgets.map((child) {
|
||||
return SizedBox(width: 160, child: child);
|
||||
}).toList(),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user