Flutter Github客户端示例

封面图 • 2026-02-01 • Flutter

当然！下面是一个简单的 **Flutter GitHub 客户端示例**，用于展示如何使用 Flutter 从 GitHub API 获取用户信息（如用户名、仓库等）。

---

## 🧩 功能说明

- 使用 `http` 包发送 HTTP 请求到 GitHub API。
- 获取指定用户的 GitHub 信息（如用户名、头像、仓库数量等）。
- 显示在 Flutter 界面上。

---

## 📦 依赖安装

在 `pubspec.yaml` 中添加以下依赖：

```yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
```

然后运行 `flutter pub get`。

---

## 🧠 示例代码

### `main.dart`

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

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

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

class GitHubUserScreen extends StatefulWidget {
  @override
  _GitHubUserScreenState createState() => _GitHubUserScreenState();
}

class _GitHubUserScreenState extends State<GitHubUserScreen> {
  String? username = "octocat"; // 默认用户
  Map<String, dynamic>? userData;

Future<void> fetchUserData() async {
    final response = await http.get(
      Uri.parse('https://api.github.com/users/$username'),
      headers: {'Accept': 'application/vnd.github.v3+json'},
    );

if (response.statusCode == 200) {
      setState(() {
        userData = jsonDecode(response.body);
      });
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to load user data')),
      );
    }
  }

@override
  void initState() {
    super.initState();
    fetchUserData();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GitHub User Info'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (userData != null)
              Column(
                children: [
                  Image.network(userData!['avatar_url']),
                  SizedBox(height: 16),
                  Text('Username: ${userData!['login']}', style: TextStyle(fontSize: 20)),
                  Text('Public Repos: ${userData!['public_repos']}', style: TextStyle(fontSize: 18)),
                  Text('Followers: ${userData!['followers']}', style: TextStyle(fontSize: 18)),
                ],
              )
            else
              CircularProgressIndicator(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            username = username == "octocat" ? "flutter" : "octocat";
            fetchUserData();
          });
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}
```

---

## 🧪 运行效果

- 默认显示 `octocat` 的信息。
- 点击右下角的刷新按钮可以切换为 `flutter` 用户。
- 显示用户头像、用户名、公开仓库数和关注者数。

---

## 🛠️ 扩展建议

你可以进一步扩展这个项目：

- 显示用户仓库列表。
- 实现搜索功能。
- 添加登录授权（OAuth）。
- 使用 `provider` 或 `riverpod` 管理状态。
- 使用 `flutter_bloc` 进行状态管理。

---

如果你需要完整的项目结构或想集成 OAuth 认证，请告诉我，我可以继续帮你完善。