Flutter TWA（Trusted Web Activities）集成插件twa的使用

Flutter TWA（可信网络活动）集成插件twa的使用

在本教程中，我们将学习如何在Flutter应用中集成TWA（可信网络活动）插件。通过使用该插件，你可以在你的Flutter应用中嵌入一个可信的网页。

开始使用

步骤 1: 添加依赖库

首先，在你的pubspec.yaml文件中添加twa插件依赖：

dependencies:
  flutter:
    sdk: flutter
  twa: ^版本号  # 请替换为最新版本号

然后运行flutter pub get以安装该库。

步骤 2: 配置web/index.html

在你的项目根目录下的web/index.html文件中添加以下脚本标签：

<head>
    <!-- 引入Telegram Web App库 -->
    <script src="https://telegram.org/js/telegram-web-app.js" defer></script>
</head>

步骤 3: 创建一个简单的TWA页面

接下来，我们将创建一个简单的TWA页面来展示Telegram Web App的功能。

示例代码

首先，确保你已经创建了一个新的Flutter项目，并且已经添加了上述依赖库。然后，在你的lib/main.dart文件中编写以下代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TWA Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // TWA控制器
  final TwaController twaController = TwaController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化TWA控制器
    twaController.initialize();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TWA Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 启动TWA
                twaController.startTwa();
              },
              child: Text('启动TWA'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 关闭TWA
                twaController.closeTwa();
              },
              child: Text('关闭TWA'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter TWA（Trusted Web Activities）集成插件twa的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter TWA（Trusted Web Activities）集成插件twa的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成Trusted Web Activities（TWA）可以通过使用twa插件来实现。TWA允许你将Web应用包装成Android应用，并且可以在Chrome中全屏运行你的Web内容。以下是集成TWA的步骤：

1. 添加依赖

首先，在你的pubspec.yaml文件中添加twa插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  twa: ^1.0.0  # 请查看最新版本

然后运行flutter pub get来获取依赖。

2. 配置Android项目

TWA需要一些Android平台的配置。首先，确保你的android/app/build.gradle文件中minSdkVersion至少为16：

android {
    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 30
        // 其他配置
    }
}

3. 创建TWA启动器

在你的Flutter项目中，创建一个新的Dart文件（例如twa_launcher.dart），并添加以下代码：

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

class TWALauncher extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TWA Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            TWA.launch(
              'https://your-web-app-url.com',
              context: context,
            );
          },
          child: Text('Launch TWA'),
        ),
      ),
    );
  }
}

4. 在应用中启动TWA

在你的主应用中，导航到TWALauncher页面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TWA Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TWALauncher(),
    );
  }
}

5. 配置AndroidManifest.xml

在android/app/src/main/AndroidManifest.xml文件中，添加以下配置以启用TWA：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        android:name=".MyApplication"
        android:label="Your App"
        android:icon="@mipmap/ic_launcher">
        
        <activity
            android:name=".MainActivity"
            android:label="Your App"
            android:theme="@style/LaunchTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
            <meta-data
                android:name="android.support.customtabs.trusted.DEFAULT_URL"
                android:value="https://your-web-app-url.com" />
            <meta-data
                android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR"
                android:resource="@color/colorPrimary" />
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data android:scheme="https" android:host="your-web-app-url.com"/>
            </intent-filter>
        </activity>

    </application>
</manifest>
回到顶部