Flutter导航栏及页面过渡插件ruut的使用

Ruut Flutter SDK 提供了一种无缝的方式来将 Ruut 聊天小部件集成到您的 Flutter 应用程序中。

安装

要在您的 Flutter 项目中使用 Ruut Flutter SDK，在 pubspec.yaml 文件中添加 ruut 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  ruut: ^1.0.0

权限

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

同时，在应用标签中添加以下属性：

<application
  android:usesCleartextTraffic="true"

iOS

在 ios/Runner/Info.plist 文件中添加以下键：

<key>NSPhotoLibraryUsageDescription</key>
<string>此应用程序需要访问照片库以上传图片。</string>
<key>NSCameraUsageDescription</key>
<string>此应用程序需要访问相机以捕获图像。</string>

使用

在您的 Flutter 应用程序中使用 Ruut 小部件的示例如下：

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

class MyRuutScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Ruut(
      ruutToken: 'YOUR_RUUT_TOKEN',
      user: RuutUser(
        id: 'USER_ID',
        email: 'user@example.com',
        fullName: 'John Doe',
        // 添加其他用户详细信息
      ),
      onReady: () {
        print('Ruut is ready');
      },
    );
  }
}

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 中使用 Ruut 小部件，并实现页面过渡效果：

import 'package:flutter/material.dart';
import 'package:ruut/models/ruut_user_model.dart';
import 'package:ruut/ruut.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  RuutUser ruutUser = RuutUser(
    id: '54534nni345',
    email: 'josephbull@ruut.com',
    fullName: 'Joseph Bullock',
    avatarUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx0IGlEwa4PPmyv242EBPdWs9TwsA7UZvUKQ&s',
    city: 'Lekki',
    companyName: 'Loyal Milk',
    phone: '08080808080',
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MaterialButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Ruut(
                      ruutToken: 'TjcSGQLNJd3UvJBGkp1QT22z',
                      user: ruutUser,
                    ),
                  ),
                );
              },
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('启动小部件'),
            ),
            MaterialButton(
              onPressed: () {
                // 设置用户
                Ruut.setUser(RuutUser(
                  id: '545353nni345',
                  email: 'joelmike@ruut.com',
                  fullName: 'Kalu Wildrick',
                  avatarUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx0IGlEwa4PPmyv242EBPdWs9TwsA7UZvUKQ&s',
                  city: 'Lekki',
                  companyName: 'Loyal Milk',
                  phone: '08080808080',
                ));
              },
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('设置用户'),
            ),
            MaterialButton(
              onPressed: () {
                // 重置用户
                Ruut.reset();
              },
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('重置用户'),
            ),
            MaterialButton(
              onPressed: () {
                // 设置自定义属性
                Ruut.setCustomAttributes({'school': 'My School'});
              },
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('设置自定义属性'),
            ),
          ],
        ),
      ),
    );
  }
}