Flutter服务端交互插件serverpod_shared的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Serverpod

Serverpod banner

Serverpod 是一个开源的、可扩展的应用服务器，使用 Dart 编写，专为 Flutter 社区设计。

什么是 Serverpod？

Serverpod 是一个开源的、可扩展的应用服务器，使用 Dart 编写，专门为 Flutter 社区设计。请查看它！

Flutter服务端交互插件serverpod_shared的使用

以下是关于如何在 Flutter 应用中使用 serverpod_shared 插件的完整示例 demo。

示例代码

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

dependencies:
  flutter:
    sdk: flutter
  serverpod_shared: ^1.0.0 # 请确保版本号是最新的

接下来，创建一个简单的 Flutter 应用来展示如何与 Serverpod 进行交互。

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _response = 'No response yet';

  // 模拟与Serverpod的交互
  void _fetchDataFromServerpod() async {
    try {
      // 假设我们有一个 API 端点返回一个字符串
      var client = ServerpodClient('http://yourserverpodapi.com');
      
      // 发送请求到服务器
      var result = await client.sendRequest('/api/getData', method: 'GET');

      // 更新UI显示响应结果
      setState(() {
        _response = result.toString();
      });
    } catch (e) {
      setState(() {
        _response = 'Error: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Response from Serverpod:',
            ),
            Text(
              '$_response',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _fetchDataFromServerpod,
        tooltip: 'Fetch Data',
        child: Icon(Icons.refresh),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

更多关于Flutter服务端交互插件serverpod_shared的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter服务端交互插件serverpod_shared的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，serverpod_shared 是 Flutter 与 ServerPod 进行交互的重要插件之一。ServerPod 是一个用于构建高性能、可扩展的后端服务的框架，它与 Flutter 无缝集成，提供实时数据同步等功能。

以下是一个简单的代码示例，展示如何在 Flutter 应用中使用 serverpod_shared 插件与 ServerPod 后端进行交互。

Flutter 前端代码

首先，确保在 pubspec.yaml 文件中添加 serverpod_shared 依赖：

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

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

接下来，在你的 Flutter 应用中，你可以这样使用 serverpod_shared：

import 'package:flutter/material.dart';
import 'package:serverpod_client/serverpod_client.dart';
import 'package:serverpod_shared/serverpod_shared.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  late ServerPodClient podClient;
  String? message = 'Loading...';

  @override
  void initState() {
    super.initState();
    // 初始化 ServerPod 客户端
    podClient = ServerPodClient(
      endpoint: Uri.parse('http://localhost:8080'), // 替换为你的 ServerPod 后端地址
    );

    // 连接并获取数据
    _fetchMessage();
  }

  Future<void> _fetchMessage() async {
    try {
      // 假设后端有一个名为 `MessageService` 的服务，其中有一个 `getMessage` 方法
      var response = await podClient.call(
        Endpoint.parse('MessageService/getMessage'),
      );

      // 更新 UI
      setState(() {
        message = response.data['message'] as String?;
      });
    } catch (e) {
      print('Error fetching message: $e');
      setState(() {
        message = 'Error fetching message';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ServerPod Demo'),
      ),
      body: Center(
        child: Text(message ?? 'Loading...'),
      ),
    );
  }
}

ServerPod 后端代码

在 ServerPod 后端，你需要定义一个服务来处理前端的请求。以下是一个简单的示例：

import 'package:serverpod/serverpod.dart';

@Service()
class MessageService extends Service {
  @Endpoint(methods: [HttpMethod.get])
  Future<Map<String, dynamic>> getMessage() async {
    return {'message': 'Hello from ServerPod!'};
  }
}

void main() {
  ServerPod server = ServerPod(
    port: 8080, // 后端监听的端口
    services: [MessageService()],
  );

  server.start();
}

运行

  1. 启动你的 ServerPod 后端。
  2. 运行你的 Flutter 应用。

你应该会在 Flutter 应用中看到从 ServerPod 后端获取的消息。

这个示例展示了如何使用 serverpod_shared 插件在 Flutter 应用中与 ServerPod 后端进行简单的 GET 请求交互。根据你的需求，你可以扩展这个示例来处理更复杂的逻辑和更多的数据类型。

回到顶部