rutvik110/tweet_embed_with_loader.dart

## tweet_embed_with_loader.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;
                    });
                  },
                ),
              ),
          ),
          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">
        </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'),
        ).then( function( el ) {

        Twitter.postMessage("Tweet Loaded");

        });
      }

        </script>

      </html>
    """;
}

	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;
	});
	},
	),
	),
	),
	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">
	</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'),
	).then( function( el ) {

	Twitter.postMessage("Tweet Loaded");

	});
	}

	</script>

	</html>
	""";
	}