279 lines
9.1 KiB
Dart
279 lines
9.1 KiB
Dart
import 'package:easy_web_view/easy_web_view.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class BasicExample extends StatefulWidget {
|
|
const BasicExample({super.key});
|
|
|
|
@override
|
|
_BasicExampleState createState() => _BasicExampleState();
|
|
}
|
|
|
|
class _BasicExampleState extends State<BasicExample> {
|
|
String src = 'https://flutter.dev';
|
|
String src2 = 'https://flutter.dev/community';
|
|
String src3 = 'http://www.youtube.com/embed/IyFZznAk69U';
|
|
static ValueKey key = const ValueKey('key_0');
|
|
static ValueKey key2 = const ValueKey('key_1');
|
|
static ValueKey key3 = const ValueKey('key_2');
|
|
bool _isHtml = false;
|
|
bool _blockNavigation = false;
|
|
bool _isMarkdown = false;
|
|
bool _useWidgets = false;
|
|
bool _editing = false;
|
|
bool _isSelectable = false;
|
|
bool _showSummernote = false;
|
|
|
|
bool open = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('Easy Web View'),
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.access_time),
|
|
onPressed: () {
|
|
setState(() {
|
|
print("Click!");
|
|
open = !open;
|
|
});
|
|
},
|
|
|
|
//tooltip: "Menu",
|
|
),
|
|
actions: <Widget>[
|
|
Builder(builder: (context) {
|
|
return IconButton(
|
|
icon: Icon(_editing ? Icons.close : Icons.settings),
|
|
onPressed: () {
|
|
if (mounted) {
|
|
setState(() {
|
|
_editing = !_editing;
|
|
});
|
|
}
|
|
},
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
body: _editing
|
|
? SingleChildScrollView(
|
|
child: Column(
|
|
children: <Widget>[
|
|
SwitchListTile(
|
|
title: const Text('Html Content'),
|
|
value: _isHtml,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isHtml = val;
|
|
if (val) {
|
|
_isMarkdown = false;
|
|
src = htmlContent;
|
|
} else {
|
|
src = url;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
),
|
|
SwitchListTile(
|
|
title: const Text('Block Html Navigation'),
|
|
value: _blockNavigation,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_blockNavigation = val;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
SwitchListTile(
|
|
title: const Text('Markdown Content'),
|
|
value: _isMarkdown,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isMarkdown = val;
|
|
if (val) {
|
|
_isHtml = false;
|
|
src = markdownContent;
|
|
} else {
|
|
src = url;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
),
|
|
SwitchListTile(
|
|
title: const Text('Use Widgets'),
|
|
value: _useWidgets,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_useWidgets = val;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
SwitchListTile(
|
|
title: const Text('Selectable Text'),
|
|
value: _isSelectable,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isSelectable = val;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
SwitchListTile(
|
|
title: const Text('Show Summernote'),
|
|
value: _showSummernote,
|
|
onChanged: (val) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_showSummernote = val;
|
|
if (val) {
|
|
_isMarkdown = false;
|
|
_isHtml = true;
|
|
src = summernoteHtml;
|
|
} else {
|
|
src = url;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: Stack(
|
|
children: <Widget>[
|
|
Row(
|
|
children: <Widget>[
|
|
Expanded(
|
|
flex: 1,
|
|
child: EasyWebView(
|
|
src: src,
|
|
onLoaded: (_) {
|
|
print('$key: Loaded: $src');
|
|
},
|
|
isMarkdown: _isMarkdown,
|
|
convertToWidgets: _useWidgets,
|
|
key: key,
|
|
)),
|
|
Expanded(
|
|
flex: 1,
|
|
child: EasyWebView(
|
|
onLoaded: (_) {
|
|
print('$key2: Loaded: $src2');
|
|
},
|
|
src: src2,
|
|
key: key2,
|
|
isMarkdown: _isMarkdown,
|
|
convertToWidgets: _useWidgets,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Column(
|
|
children: <Widget>[
|
|
Expanded(
|
|
flex: 3,
|
|
child: Container(),
|
|
),
|
|
Expanded(
|
|
flex: 1,
|
|
child: SizedBox(
|
|
width: (open) ? 500 : 0,
|
|
child: EasyWebView(
|
|
src: src3,
|
|
onLoaded: (_) {
|
|
print('$key3: Loaded: $src3');
|
|
},
|
|
isMarkdown: _isMarkdown,
|
|
convertToWidgets: _useWidgets,
|
|
key: key3,
|
|
),
|
|
)),
|
|
],
|
|
)
|
|
],
|
|
));
|
|
}
|
|
|
|
String get htmlContent => """
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Page Title</title>
|
|
</head>
|
|
<body>
|
|
<h1>This is a Heading</h1>
|
|
<p>This is a paragraph.</p>
|
|
</body>
|
|
</html>
|
|
""";
|
|
|
|
String get markdownContent => """
|
|
# This is a heading
|
|
## Here's a smaller heading
|
|
This is a paragraph
|
|
* Here's a bulleted list
|
|
* Another item
|
|
1. And an ordered list
|
|
1. The numbers don't matter
|
|
> This is a qoute
|
|
[This is a link to Flutter](https://flutter.dev)
|
|
""";
|
|
|
|
String get embeedHtml => """
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/rtBkU4pvHcw?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
""";
|
|
|
|
String get url => 'https://flutter.dev';
|
|
|
|
String summernoteHtml = '''
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="summernote"></div>
|
|
<script>
|
|
window.onload = function () {
|
|
\$('#summernote').summernote({
|
|
height: 400,
|
|
tabsize: 2,
|
|
callbacks: {
|
|
onChange: function() {
|
|
\$('#html-content').text(\$('#summernote').summernote('code'));
|
|
|
|
window.parent.postMessage(\$('#summernote').summernote('code'), '*');
|
|
if (window.Test != null) {
|
|
window.Test.postMessage(\$('#summernote').summernote('code'));
|
|
}
|
|
}
|
|
},
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'clear']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['table', ['table']],
|
|
['insert', ['link', 'picture']],
|
|
['view', ['codeview']]
|
|
]
|
|
});
|
|
}
|
|
</script>
|
|
<div id="html-content" style="display: none"></div>
|
|
</body>
|
|
</html>
|
|
''';
|
|
}
|