Flutter服务器交互插件dartness_server的使用

Dartness 是一个用于构建高效和可扩展的服务器端应用程序的 Dart 框架。本文将介绍如何使用 dartness_server 插件来创建一个简单的服务器，并展示如何与 Flutter 应用程序进行交互。

介绍

Dartness 提供了一种简便且快速的方式，帮助开发者构建现代独立服务器应用。它基于 shelf 构建，并受到 Spring Boot 和 NestJS 的启发。

创建新项目

步骤1：安装Dart SDK

确保已安装 Dart SDK 版本 >= 2.17.0：

$ dart --version            
Dart SDK version: 3.0.0 (stable)

步骤2：创建项目

使用以下命令创建一个新的Dart项目：

$ dart create -t console your_project_name

步骤3：添加依赖

在 pubspec.yaml 文件中添加 dartness_server 及其相关依赖：

dependencies:
  dartness_server: ^0.6.1

dev_dependencies:
  build_runner: ^2.2.0
  dartness_generator: ^0.6.1

步骤4：编写主文件

在 bin/main.dart 中编写如下代码：

import 'package:dartness_server/dartness_server.dart';

void main() async {
  final app = Dartness(
    port: 3000,
  );

  // 添加路由
  app.get('/hello', (ctx) {
    return 'Hello, World!';
  });

  await app.create();
}

步骤5：运行服务器

使用以下命令运行服务器：

$ dart run bin/main.dart
Server listening on port 3000

访问 http://localhost:3000/hello，你将看到 “Hello, World!” 的响应。

Flutter 客户端示例

下面是一个简单的 Flutter 应用程序，演示如何与上面创建的服务器进行交互。

步骤1：创建Flutter项目

flutter create flutter_client
cd flutter_client

步骤2：添加HTTP包

在 pubspec.yaml 中添加 http 包：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

步骤3：编写客户端代码

在 lib/main.dart 中编写如下代码：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _responseText = 'Press the button to fetch data from server';

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('http://localhost:3000/hello'));
    if (response.statusCode == 200) {
      setState(() {
        _responseText = json.decode(response.body);
      });
    } else {
      setState(() {
        _responseText = 'Failed to load data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Client'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_responseText),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Fetch Data'),
            ),
          ],
        ),
      ),
    );
  }
}

运行Flutter应用

确保服务器正在运行，然后使用以下命令运行 Flutter 应用：

flutter run