Flutter矩阵操作插件matrix的使用

简介

Matrix SDK 是一个用于在 Flutter 应用中实现端到端加密（E2EE）的库，主要基于 Dart 语言编写。为了实现 E2EE，需要提供 libolm 和 OpenSSL (libcrypto) 库。

安装依赖

在你的 Flutter 项目中添加以下依赖：

flutter pub add matrix
flutter pub add flutter_olm
flutter pub add flutter_openssl_crypto

开始使用

初始化客户端

首先，你需要初始化 Matrix 客户端，并设置数据库支持。

import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final client = Client(
    'Matrix Example Chat',
    databaseBuilder: (_) async {
      final dir = await getApplicationSupportDirectory();
      final db = MatrixSdkDatabase(
        'Matrix Example Chat',
        await sqlite.openDatabase(dir.path + '/database.sqlite'),
      );
      await db.open();
      return db;
    },
  );
  await client.init();
  runApp(MatrixExampleChat(client: client));
}

class MatrixExampleChat extends StatelessWidget {
  final Client client;

  const MatrixExampleChat({required this.client, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Matrix Example Chat',
      builder: (context, child) => Provider<Client>(
        create: (context) => client,
        child: child,
      ),
      home: client.isLogged() ? const RoomListPage() : const LoginPage(),
    );
  }
}

登录页面

创建登录页面，允许用户输入 homeserver、用户名和密码进行登录。

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _homeserverTextField = TextEditingController(text: 'matrix.org');
  final TextEditingController _usernameTextField = TextEditingController();
  final TextEditingController _passwordTextField = TextEditingController();
  bool _loading = false;

  void _login() async {
    setState(() {
      _loading = true;
    });

    try {
      final client = Provider.of<Client>(context, listen: false);
      await client.checkHomeserver(Uri.https(_homeserverTextField.text.trim(), ''));
      await client.login(
        LoginType.mLoginPassword,
        password: _passwordTextField.text,
        identifier: AuthenticationUserIdentifier(user: _usernameTextField.text),
      );
      Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(builder: (_) => const RoomListPage()),
        (route) => false,
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(e.toString())),
      );
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _homeserverTextField,
              readOnly: _loading,
              autocorrect: false,
              decoration: const InputDecoration(prefixText: 'https://', border: OutlineInputBorder(), labelText: 'Homeserver'),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _usernameTextField,
              readOnly: _loading,
              autocorrect: false,
              decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Username'),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _passwordTextField,
              readOnly: _loading,
              autocorrect: false,
              obscureText: true,
              decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _loading ? null : _login,
                child: _loading ? const LinearProgressIndicator() : const Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

房间列表页面

显示已加入的房间列表，并允许用户进入房间聊天。

class RoomListPage extends StatefulWidget {
  const RoomListPage({Key? key}) : super(key: key);

  @override
  _RoomListPageState createState() => _RoomListPageState();
}

class _RoomListPageState extends State<RoomListPage> {
  void _logout() async {
    final client = Provider.of<Client>(context, listen: false);
    await client.logout();
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (_) => const LoginPage()),
      (route) => false,
    );
  }

  void _join(Room room) async {
    if (room.membership != Membership.join) {
      await room.join();
    }
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => RoomPage(room: room),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final client = Provider.of<Client>(context, listen: false);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chats'),
        actions: [
          IconButton(icon: const Icon(Icons.logout), onPressed: _logout),
        ],
      ),
      body: StreamBuilder(
        stream: client.onSync.stream,
        builder: (context, _) => ListView.builder(
          itemCount: client.rooms.length,
          itemBuilder: (context, i) => ListTile(
            leading: CircleAvatar(
              foregroundImage: client.rooms[i].avatar == null
                  ? null
                  : NetworkImage(client.rooms[i].avatar!.getThumbnail(client, width: 56, height: 56).toString()),
            ),
            title: Row(
              children: [
                Expanded(child: Text(client.rooms[i].displayname)),
                if (client.rooms[i].notificationCount > 0)
                  Material(
                    borderRadius: BorderRadius.circular(99),
                    color: Colors.red,
                    child: Padding(
                      padding: const EdgeInsets.all(2.0),
                      child: Text(client.rooms[i].notificationCount.toString()),
                    ),
                  )
              ],
            ),
            subtitle: Text(client.rooms[i].lastEvent?.body ?? 'No messages', maxLines: 1),
            onTap: () => _join(client.rooms[i]),
          ),
        ),
      ),
    );
  }
}

房间聊天页面

在房间内发送和接收消息。

class RoomPage extends StatefulWidget {
  final Room room;

  const RoomPage({required this.room, Key? key}) : super(key: key);

  @override
  _RoomPageState createState() => _RoomPageState();
}

class _RoomPageState extends State<RoomPage> {
  late final Future<Timeline> _timelineFuture;
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  int _count = 0;

  @override
  void initState() {
    _timelineFuture = widget.room.getTimeline(onChange: (i) {
      print('on change! $i');
      _listKey.currentState?.setState(() {});
    }, onInsert: (i) {
      print('on insert! $i');
      _listKey.currentState?.insertItem(i);
      _count++;
    }, onRemove: (i) {
      print('On remove $i');
      _count--;
      _listKey.currentState?.removeItem(i, (_, __) => const ListTile());
    }, onUpdate: () {
      print('On update');
    });
    super.initState();
  }

  final TextEditingController _sendController = TextEditingController();

  void _send() {
    widget.room.sendTextEvent(_sendController.text.trim());
    _sendController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.room.displayname)),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: FutureBuilder<Timeline>(
                future: _timelineFuture,
                builder: (context, snapshot) {
                  final timeline = snapshot.data;
                  if (timeline == null) {
                    return const Center(child: CircularProgressIndicator.adaptive());
                  }
                  _count = timeline.events.length;
                  return Column(
                    children: [
                      Center(
                        child: TextButton(onPressed: timeline.requestHistory, child: const Text('Load more...')),
                      ),
                      const Divider(height: 1),
                      Expanded(
                        child: AnimatedList(
                          key: _listKey,
                          reverse: true,
                          initialItemCount: timeline.events.length,
                          itemBuilder: (context, i, animation) => timeline.events[i].relationshipEventId != null
                              ? Container()
                              : ScaleTransition(
                                  scale: animation,
                                  child: Opacity(
                                    opacity: timeline.events[i].status.isSent ? 1 : 0.5,
                                    child: ListTile(
                                      leading: CircleAvatar(
                                        foregroundImage: timeline.events[i].sender.avatarUrl == null
                                            ? null
                                            : NetworkImage(timeline.events[i].sender.avatarUrl!.getThumbnail(widget.room.client, width: 56, height: 56).toString()),
                                      ),
                                      title: Row(
                                        children: [
                                          Expanded(child: Text(timeline.events[i].sender.calcDisplayname())),
                                          Text(timeline.events[i].originServerTs.toIso8601String(), style: const TextStyle(fontSize: 10)),
                                        ],
                                      ),
                                      subtitle: Text(timeline.events[i].getDisplayEvent(timeline).body),
                                    ),
                                  ),
                                ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
            const Divider(height: 1),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _sendController,
                      decoration: const InputDecoration(hintText: 'Send message'),
                    ),
                  ),
                  IconButton(icon: const Icon(Icons.send_outlined), onPressed: _send),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何在 Flutter 中使用 matrix 插件来构建一个简单的聊天应用。你可以根据需求进一步扩展和修改此示例。

更多关于Flutter矩阵操作插件matrix的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼

更多关于Flutter矩阵操作插件matrix的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，关于Flutter中的矩阵操作插件matrix_gesture_detector（虽然帖子没有明确提到具体插件名，但通常Flutter中的矩阵操作会与手势检测结合，这里以matrix_gesture_detector为例），我们可以展示如何使用这个插件来进行矩阵变换。需要注意的是，matrix_gesture_detector并不是Flutter官方插件，而是一个社区提供的插件，用于处理手势驱动的矩阵变换。

首先，确保你的pubspec.yaml文件中已经添加了matrix_gesture_detector依赖：

dependencies:
  flutter:
    sdk: flutter
  matrix_gesture_detector: ^x.y.z  # 请替换为最新版本号

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

以下是一个使用MatrixGestureDetector的简单示例，它展示了如何通过手势来变换一个容器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Matrix Gesture Detector Demo'),
        ),
        body: Center(
          child: MyMatrixTransformWidget(),
        ),
      ),
    );
  }
}

class MyMatrixTransformWidget extends StatefulWidget {
  @override
  _MyMatrixTransformWidgetState createState() => _MyMatrixTransformWidgetState();
}

class _MyMatrixTransformWidgetState extends State<MyMatrixTransformWidget> {
  Matrix4 _matrix = Matrix4.identity();

  void _handleMatrixUpdate(Matrix4 matrix) {
    setState(() {
      _matrix = matrix;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MatrixGestureDetector(
      onMatrixUpdate: _handleMatrixUpdate,
      child: Transform(
        transform: _matrix,
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(
            child: Text(
              'Drag & Scale Me',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

MatrixGestureDetector包裹了一个Transform小部件。
Transform小部件使用_matrix变量作为变换矩阵。
当用户通过手势（如拖动或缩放）与界面交互时，_handleMatrixUpdate回调函数会被调用，并更新_matrix。
setState方法用于触发UI的重新构建，以显示新的变换效果。

这个示例展示了基本的矩阵变换操作，包括平移、缩放和旋转（如果手势包含这些动作的话）。你可以根据需要进一步自定义和扩展这个示例，例如添加旋转手势的支持，或者限制某些类型的变换。