如何通过HTTP Post实现Flutter登录与注册认证，并实现登录结果提示功能

我来帮你一步步实现这个登录认证功能，结合你已经写好的模型和输入框，咱们按以下步骤来：

1. 先添加HTTP依赖 #

首先要在pubspec.yaml里添加http包，用来发送Post请求：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 用最新版本即可

执行flutter pub get完成依赖安装。

2. 创建API服务类处理请求 #

新建login_api_service.dart文件，封装登录的HTTP请求逻辑：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'login_model.dart';

class LoginApiService {
  // 替换成你的实际API地址
  static const String _baseUrl = 'https://your-api-domain.com/api/login';

  Future<LoginResponseModel> login(LoginRequestModel requestModel) async {
    final response = await http.post(
      Uri.parse(_baseUrl),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode(requestModel.toJson()),
    );

    if (response.statusCode == 200) {
      return LoginResponseModel.fromJson(jsonDecode(response.body));
    } else {
      // 即使返回非200，也解析错误信息（根据你的API返回格式调整）
      return LoginResponseModel.fromJson(jsonDecode(response.body));
    }
  }
}

3. 完善登录页面的表单逻辑 #

在你的登录页面State类里，补全表单校验、提交和反馈逻辑：

import 'package:flutter/material.dart';
import 'login_model.dart';
import 'login_api_service.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final LoginRequestModel _loginRequestModel = LoginRequestModel();
  final LoginApiService _apiService = LoginApiService();
  bool _isLoading = false;

  // 表单提交核心逻辑
  Future<void> _submitForm() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      setState(() => _isLoading = true);

      try {
        final response = await _apiService.login(_loginRequestModel);
        setState(() => _isLoading = false);

        // 根据API响应判断登录状态
        if (response.token.isNotEmpty) {
          // 登录成功提示
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('登录成功！')),
          );
          // 这里可以添加跳转首页的逻辑
        } else {
          // 登录失败提示（优先用API返回的错误信息，无则用默认提示）
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(response.error.isEmpty ? '用户不存在或密码错误' : response.error)),
          );
        }
      } catch (e) {
        setState(() => _isLoading = false);
        // 网络异常提示
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('网络错误：${e.toString()}')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 你已有的LoginId输入框，补充校验逻辑
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(labelText: '登录ID'),
                validator: (input) {
                  if (input == null || input.trim().isEmpty) {
                    return '请输入登录ID';
                  }
                  return null;
                },
                onSaved: (input) => _loginRequestModel.LoginId = input!,
              ),
              // 添加密码输入框
              TextFormField(
                obscureText: true,
                decoration: const InputDecoration(labelText: '密码'),
                validator: (input) {
                  if (input == null || input.trim().isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
                onSaved: (input) => _loginRequestModel.Password = input!,
              ),
              const SizedBox(height: 20),
              // 提交按钮（加载状态下禁用）
              ElevatedButton(
                onPressed: _isLoading ? null : _submitForm,
                child: _isLoading
                    ? const CircularProgressIndicator(color: Colors.white)
                    : const Text('登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 关键逻辑说明 #

• 表单校验：给输入框添加了非空校验，确保用户不会提交空内容；
• 加载状态管理：请求过程中禁用按钮并显示加载指示器，避免重复提交；
• 响应反馈：根据API返回的token和error字段，精准显示登录结果；
• 异常捕获：处理网络请求可能出现的异常，给用户友好的错误提示。

注册功能扩展思路 #

如果要实现注册功能，逻辑和登录高度相似：

1. 新建RegisterRequestModel和RegisterResponseModel；
2. 在API服务类中添加注册的Post请求方法；
3. 新建注册页面，复用表单校验、提交和SnackBar反馈逻辑。

内容的提问来源于stack exchange，提问作者Tuhin