Build telegram web apps in flutter using telegram_web_app library
- Import Library in your pubspec.yaml
- And add this line in
web/index.html
<head>
<script src="https://telegram.org/js/telegram-web-app.js" defer=""></script>
</head>Checkout details of available telegram_web apis here You can also find detailed examples in example project.
- Enable debugging in telegram web app. Checkout this post for more details
- Then navigate to
\examplefolder - Deploy the example app via firebase or any other hosting service. You can find firebase hosting documentation here
- Create web app in telegram
- Use the website url to load the webapp in telegram
- You can also inspect the app with Javascript logs via debugging as described here
- For more info and support, you can join telegram group flutter_telegram
Here is an article on how to deploy web to Firebase and link to Telegram web app 👉 Telegram Mini Apps
There is a class TelegramWebApp which contains all the telegram web apis. You can call the methods via TelegramWebApp.instance
You can also mock TelegramWebApp by extending it if you are trying to test outside telegram platform. Alternatively, TelegramWebAppFake object can also be used for the same purpose.
// current telegram version
Text(TelegramWebApp.instance.version)
// telegram colors associated with the user's app
Text(TelegramWebApp.instance.themeParams)
// Object containing user details and user validation hash
Text(TelegramWebApp.instance.initData.toString())You can find full list of api examples in example folder. Please feel free to contribute for improvements and any updates.
-
All the apis are only available inside telegram web app. You can't use the apis outside the platform.
-
In Android, Web App is sometimes not loading (only grey/white screen showing up). If this happens to you, there is a 'hacky' workaround. You can also find it in example app:
void main() async {
try {
if (TelegramWebApp.instance.isSupported) {
TelegramWebApp.instance.ready();
Future.delayed(const Duration(seconds: 1), TelegramWebApp.instance.expand);
}
} catch (e) {
print("Error happened in Flutter while loading Telegram $e");
// add delay for 'Telegram seldom not loading' bug
await Future.delayed(const Duration(milliseconds: 200));
main();
return;
}
FlutterError.onError = (details) {
print("Flutter error happened: $details");
};
runApp(const MyApp());
}