Flutter计数器服务插件counter_service的功能使用

Counter Service简介

Counter Service 是一个基于 Flutter 的包，它提供了一个基于 WebSocket 的计数器功能。它允许你连接到 WebSocket 服务器，增加或减少计数器值，并实时接收更新。

功能特性

• WebSocket 连接管理：支持连接、断开 WebSocket 服务器。
• 实时计数器更新：通过 WebSocket 实时获取计数器的最新状态。
• 增加和减少计数器操作：提供方法来增加或减少计数器值。
• 单例模式：方便在整个应用程序中访问计数器服务。
• 错误处理与连接状态跟踪：可以监控连接状态并处理异常。

使用步骤

1. 添加依赖

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

dependencies:
  counter_service: ^0.0.1

然后运行以下命令安装包：

flutter pub get

使用示例

以下是一个完整的示例，展示了如何使用 Counter Service 插件实现一个简单的计数器应用。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Service Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  [@override](/user/override)
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  final CounterService _counterService = CounterService();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter Service Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Counter Value:',
              style: TextStyle(fontSize: 20),
            ),
            StreamBuilder<int>(
              stream: _counterService.counterStream,
              builder: (context, snapshot) {
                return Text(
                  '${snapshot.data ?? _counterService.counterValue}',
                  style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                );
              },
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _counterService.decrementCounter,
                  child: const Text('-'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _counterService.incrementCounter,
                  child: const Text('+'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _connectToServer,
                  child: const Text('Connect'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _disconnectFromServer,
                  child: const Text('Disconnect'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            StreamBuilder<int>(
              stream: _counterService.counterStream,
              builder: (context, snapshot) {
                return Text(
                  'Connection Status: ${_counterService.isConnected ? 'Connected' : 'Disconnected'}',
                  style: TextStyle(
                    color: _counterService.isConnected ? Colors.green : Colors.red,
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _connectToServer() async {
    await _counterService.connect('ws://127.0.0.1:5000/ws-counter');
    setState(() {}); // 触发重建以更新连接状态
  }

  void _disconnectFromServer() {
    _counterService.disconnect();
    setState(() {}); // 触发重建以更新连接状态
  }

  [@override](/user/override)
  void dispose() {
    _counterService.disconnect(); // 确保在页面销毁时断开连接
    super.dispose();
  }
}

代码说明

1. 初始化 CounterService：

   final CounterService _counterService = CounterService();
   

   创建一个 CounterService 实例，用于管理 WebSocket 连接和计数器操作。

2. 连接到 WebSocket 服务器：

   await _counterService.connect('ws://127.0.0.1:5000/ws-counter');
   

   调用 connect 方法连接到指定的 WebSocket 服务器。

3. 监听计数器更新：

   StreamBuilder<int>(
     stream: _counterService.counterStream,
     builder: (context, snapshot) {
       return Text(
         '${snapshot.data ?? _counterService.counterValue}',
         style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
       );
     },
   )
   

   使用 StreamBuilder 监听计数器流，实时更新 UI。

4. 增加或减少计数器：

   ElevatedButton(
     onPressed: _counterService.decrementCounter,
     child: const Text('-'),
   ),
   ElevatedButton(
     onPressed: _counterService.incrementCounter,
     child: const Text('+'),
   ),
   

   提供按钮来触发计数器的增加或减少操作。

5. 连接和断开 WebSocket：

   ElevatedButton(
     onPressed: _connectToServer,
     child: const Text('Connect'),
   ),
   ElevatedButton(
     onPressed: _disconnectFromServer,
     child: const Text('Disconnect'),
   ),
   

   提供按钮来手动连接或断开 WebSocket 服务器。

6. 断开连接时释放资源：

   [@override](/user/override)
   void dispose() {
     _counterService.disconnect();
     super.dispose();
   }