跳转至

Flutter 快速入门

本指南将帮助你在 3 分钟内完成 Flutter 项目初始化并调用第一次 API。

目录

步骤 1: 创建项目并添加依赖

flutter create apinexus_demo
cd apinexus_demo

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  flutter_dotenv: ^5.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  assets:
    - .env

安装依赖：

flutter pub get

步骤 2: 配置 API Key

在项目根目录创建 .env 文件：

APINEXUS_API_KEY=你的_API_KEY
APINEXUS_BASE_URL=https://apinexus.net/v1

步骤 3: 实现第一个 API 调用

将 lib/main.dart 替换为以下内容：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'API Nexus Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ChatHomePage(),
    );
  }
}

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

  @override
  State<ChatHomePage> createState() => _ChatHomePageState();
}

class _ChatHomePageState extends State<ChatHomePage> {
  final TextEditingController _input = TextEditingController();
  String _response = '';
  bool _isLoading = false;

  Future<void> _sendMessage() async {
    setState(() => _isLoading = true);
    try {
      final response = await http.post(
        Uri.parse('${dotenv.env['APINEXUS_BASE_URL']!}/chat/completions'),
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ${dotenv.env['APINEXUS_API_KEY']!}',
        },
        body: json.encode({
          'model': 'gpt-4o-mini',
          'messages': [
            {'role': 'user', 'content': _input.text}
          ],
        }),
      );
      final data = json.decode(response.body);
      setState(() => _response = data['choices'][0]['message']['content']);
    } catch (e) {
      setState(() => _response = '调用失败: $e');
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('API Nexus 快速入门')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _input,
              decoration: const InputDecoration(hintText: '输入你的问题'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _isLoading ? null : _sendMessage,
              child: Text(_isLoading ? '请求中...' : '发送'),
            ),
            const SizedBox(height: 24),
            Expanded(
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: SingleChildScrollView(
                  child: Text(_response.isEmpty
                      ? '回复将显示在这里'
                      : _response),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

运行并测试

flutter run -d linux     # Linux 桌面
flutter run -d macos     # macOS 桌面
flutter run -d windows   # Windows 桌面
flutter run -d chrome    # Web 浏览器

打开应用，输入问题（例如"介绍一下 Flutter"），点击发送即可看到 AI 回复。

继续学习