Flutter 入门与实战（二十五）：在编辑页面使用 Post 请求添加数据

2024-02-10 21:58:44

使用 POST 请求添加数据到 Flutter 应用中

简介

在 Flutter 应用中，HTTP POST 请求对于向服务器发送数据至关重要。本文将指导您创建编辑页面，允许用户添加新数据项并通过 POST 请求将数据提交到服务器。

创建编辑页面

构建编辑表单

创建编辑页面，包含一个包含数据项的输入字段和一个提交按钮。以下代码段展示了此页面的结构：

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

class EditPage extends StatefulWidget {
  @override
  _EditPageState createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  // 初始化表单和控制器
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Add Data')),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              // 创建输入字段
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(
                  icon: Icon(Icons.person),
                  label: Text('Name'),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Name is required';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _descriptionController,
                decoration: InputDecoration(
                  icon: Icon(Icons.description),
                  label: Text('Description'),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Description is required';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16.0),
              // 创建提交按钮
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState.validate()) {
                    await _addData(_nameController.text, _descriptionController.text);
                    Navigator.pop(context);
                  }
                },
                child: Text('Add'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _addData(String name, String description) async {
    var url = Uri.parse('https://example.com/api/data');
    var response = await http.post(
      url,
      body: {'name': name, 'description': description},
    );
    print('Response status: ${response.statusCode}');
    print('Response body: ${response.body}');
  }
}