Flutter Telegram Mini App #

使用 Flutter 构建 Telegram 小程序（Web 应用）。

开始使用 #

在您的 pubspec.yaml 文件中导入库：

dependencies:
  telegram_mini_app: ^0.0.1

然后在 web/index.html 文件中添加以下脚本：

<head>
    ....
    <script src="https://telegram.org/js/telegram-web-app.js" defer></script>
</head>

查看可用的 telegram_web APIs 的详细信息此处。

待办事项 #

添加完整的文档，目前可以查看 \example 文件夹。

开发设置 #

在开发或调试期间，在 Telegram WebApp 中启用调试，查看这篇文章。

额外信息 #

这只是初始版本，欢迎贡献或报告任何错误！

完整示例 #

以下是一个完整的示例代码，展示了如何在 Flutter 中集成 Telegram Mini App。

首先，创建一个新的 Flutter 项目并添加依赖项：

flutter create telegram_mini_app_example
cd telegram_mini_app_example

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  telegram_mini_app: ^0.0.1

运行 flutter pub get 来获取依赖项。

接下来，在 web/index.html 文件中添加 Telegram WebApp 脚本：

<head>
    ....
    <script src="https://telegram.org/js/telegram-web-app.js" defer></script>
</head>

然后在 lib/main.dart 文件中编写主应用代码：

import 'package:flutter/material.dart';
import 'package:telegram_mini_app/telegram_mini_app.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Telegram Mini App Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _result = '';

  void _handleResult(Map<String, dynamic> result) {
    setState(() {
      _result = result.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Telegram Mini App Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TelegramMiniApp(
              onResult: _handleResult,
            ),
            SizedBox(height: 20),
            Text(
              'Result: $_result',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，该应用包含一个 Telegram Mini App 组件。当用户与 Telegram Mini App 交互时，结果将通过回调函数传递给父组件，并在屏幕上显示。

更多关于Flutter Telegram Mini App集成插件telegram_mini_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•1 个月前

更多关于Flutter Telegram Mini App集成插件telegram_mini_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中集成Telegram Mini App插件telegram_mini_app可以帮助你快速开发与Telegram平台兼容的迷你应用程序。以下是如何使用telegram_mini_app插件的基本步骤：

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加telegram_mini_app插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  telegram_mini_app: ^0.1.0  # 请检查最新版本

然后运行flutter pub get来安装依赖。

2. 初始化插件

在你的Flutter应用程序中，首先需要初始化telegram_mini_app插件。通常，这会在main.dart文件中完成。

import 'package:flutter/material.dart';
import 'package:telegram_mini_app/telegram_mini_app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await TelegramMiniApp.init(); // 初始化插件
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Telegram Mini App',
      home: HomeScreen(),
    );
  }
}

3. 使用插件功能

telegram_mini_app插件提供了多种功能，例如获取用户信息、发送消息等。以下是一些常见的使用示例：

获取用户信息

import 'package:flutter/material.dart';
import 'package:telegram_mini_app/telegram_mini_app.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  TelegramUser? user;

  @override
  void initState() {
    super.initState();
    _fetchUserInfo();
  }

  Future<void> _fetchUserInfo() async {
    TelegramUser? userInfo = await TelegramMiniApp.getUserInfo();
    setState(() {
      user = userInfo;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Telegram Mini App'),
      ),
      body: Center(
        child: user != null
            ? Text('Hello, ${user!.firstName} ${user!.lastName}!')
            : CircularProgressIndicator(),
      ),
    );
  }
}

发送消息

import 'package:flutter/material.dart';
import 'package:telegram_mini_app/telegram_mini_app.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Telegram Mini App'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await TelegramMiniApp.sendMessage('Hello from Flutter!');
          },
          child: Text('Send Message'),
        ),
      ),
    );
  }
}

4. 处理Telegram Mini App的生命周期

你可能需要处理Telegram Mini App的生命周期事件，例如当用户打开或关闭应用程序时。telegram_mini_app插件提供了相应的回调函数。