-
Notifications
You must be signed in to change notification settings - Fork 0
/
twitter_embed.dart
125 lines (102 loc) · 3.16 KB
/
twitter_embed.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class TwitterEmbed extends StatefulWidget {
const TwitterEmbed({Key? key}) : super(key: key);
@override
State<TwitterEmbed> createState() => _TwitterEmbedState();
}
class _TwitterEmbedState extends State<TwitterEmbed> {
late bool isLoaded;
@override
void initState() {
// TODO: implement initState
super.initState();
isLoaded = false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Twitter Embed"),
),
body: Stack(
children: [
WebView(
initialUrl: Uri.dataFromString(
getHtmlString("1524510341165576192"),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString(),
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: <JavascriptChannel>{}..add(
JavascriptChannel(
name: 'Twitter',
onMessageReceived: (JavascriptMessage message) {
setState(() {
isLoaded = true;
final previewHeight = double.parse(message.message);
});
},
),
),
),
Center(
child: AnimatedSwitcher(
duration: const Duration(
milliseconds: 300,
),
child: isLoaded
? const SizedBox.shrink()
: const CircularProgressIndicator(),
transitionBuilder: (child, animation) {
return FadeTransition(
opacity: animation,
child: child,
);
},
),
),
],
),
);
}
}
String getHtmlString(String tweetId) {
return """
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{box-sizing: border-box;margin:0px; padding:0px;}
#container {
display: flex;
justify-content: center;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script id="twitter-wjs" type="text/javascript" async defer src="https://platform.twitter.com/widgets.js" onload="createMyTweet()"></script>
<script>
function createMyTweet() {
var twtter = window.twttr;
twttr.widgets.createTweet(
'$tweetId',
document.getElementById('container'),
{
theme:"dark",
}
).then( function( el ) {
const widget = document.getElementById('container');
Twitter.postMessage(widget.clientHeight);
});
}
</script>
</html>
""";
}