사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/flutter/agent-plugins --skill flutter-use-http-package시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Implementing Flutter Networking
Contents
- Configuration & Permissions
- Request Execution & Response Handling
- Background Parsing
- Workflow: Executing Network Operations
- Examples
Configuration & Permissions
Configure the environment and platform-specific permissions required for network access.
- Add the
httppackage dependency via the terminal:
bash
flutter pub add http- Import the package in your Dart files:
dart
import 'package:http/http.dart' as http;- Configure Android permissions by adding the Internet permission to
android/app/src/main/AndroidManifest.xml:
xml
<uses-permission android:name="android.permission.INTERNET" />- Configure macOS entitlements by adding the network client key to both
macos/Runner/DebugProfile.entitlementsandmacos/Runner/Release.entitlements:
xml
<key>com.apple.security.network.client</key>
<true/>Request Execution & Response Handling
Execute HTTP operations and map responses to strongly typed Dart objects.
- URIs: Always parse URL strings using
Uri.parse('your_url'). - Headers: Inject authorization and content-type headers via the
headersparameter map. UseHttpHeaders.authorizationHeaderfor auth tokens. - Payloads: For POST and PUT requests, encode the body using
jsonEncode()fromdart:convert. - Status Validation: Evaluate
response.statusCode. Treat200 OK(GET/PUT/DELETE) and201 CREATED(POST) as success. - Error Handling: Throw explicit exceptions for non-success status codes. Never return
nullon failure, as this preventsFutureBuilderfrom triggering its error state and causes infinite loading indicators. - Deserialization: Parse the raw string using
jsonDecode(response.body)and map it to a custom Dart object using a factory constructor (e.g.,fromJson).
Background Parsing
Offload expensive JSON parsing to a separate Isolate to prevent UI jank (frame drops).
- Import
package:flutter/foundation.dart. - Use the
compute()function to run the parsing logic in a background isolate. - Ensure the parsing function passed to
compute()is a top-level function or a static method, as closures or instance methods cannot be passed across isolates.
Workflow: Executing Network Operations
Use the following checklist to implement and validate network operations.
Task Progress:
- [ ] 1. Define the strongly typed Dart model with a
fromJsonfactory constructor. - [ ] 2. Implement the network request method returning a
Future<Model>. - [ ] 3. Apply conditional logic based on the operation type:
- If fetching data (GET): Append query parameters to the URI.
- If mutating data (POST/PUT): Set
'Content-Type': 'application/json; charset=UTF-8'and attach thejsonEncodebody. - If deleting data (DELETE): Return an empty model instance on success (
200 OK). - [ ] 4. Validate the
statusCodeand throw anExceptionon failure. - [ ] 5. Integrate the
Futureinto the UI usingFutureBuilder. - [ ] 6. Handle
snapshot.hasData,snapshot.hasError, and default to aCircularProgressIndicator. - [ ] 7. Feedback Loop: Run the app -> trigger the network request -> review console for unhandled exceptions -> fix parsing or permission errors.
Examples
High-Fidelity Implementation: Fetching and Parsing in the Background
dart
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
// 1. Top-level parsing function for Isolate
List<Photo> parsePhotos(String responseBody) {
final parsed = (jsonDecode(responseBody) as List<Object?>)
.cast<Map<String, Object?>>();
return parsed.map<Photo>(Photo.fromJson).toList();
}
// 2. Network execution with background parsing
Future<List<Photo>> fetchPhotos() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/photos'),
headers: {
HttpHeaders.authorizationHeader: 'Bearer your_token_here',
HttpHeaders.acceptHeader: 'application/json',
},
);
if (response.statusCode == 200) {
// Offload heavy parsing to a background isolate
return compute(parsePhotos, response.body);
} else {
throw Exception('Failed to load photos. Status: ${response.statusCode}');
}
}
// 3. Strongly typed model
class Photo {
final int id;
final String title;
final String thumbnailUrl;
const Photo({
required this.id,
required this.title,
required this.thumbnailUrl,
});
factory Photo.fromJson(Map<String, dynamic> json) {
return Photo(
id: json['id'] as int,
title: json['title'] as String,
thumbnailUrl: json['thumbnailUrl'] as String,
);
}
}
// 4. UI Integration
class PhotoGallery extends StatefulWidget {
const PhotoGallery({super.key});
@override
State<PhotoGallery> createState() => _PhotoGalleryState();
}
class _PhotoGalleryState extends State<PhotoGallery> {
late Future<List<Photo>> _futurePhotos;
@override
void initState() {
super.initState();
// Initialize Future once to prevent re-fetching on rebuilds
_futurePhotos = fetchPhotos();
}
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Photo>>(
future: _futurePhotos,
builder: (context, snapshot) {
if (snapshot.hasData) {
final photos = snapshot.data!;
return ListView.builder(
itemCount: photos.length,
itemBuilder: (context, index) => ListTile(
leading: Image.network(photos[index].thumbnailUrl),
title: Text(photos[index].title),
),
);
} else if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
}
// Default loading state
return const Center(child: CircularProgressIndicator());
},
);
}
}
