Flutter API CRUD: 강력한 모바일 애플리케이션을 위한 필수 가이드

Flutter는 구글이 개발한 오픈 소스 UI 소프트웨어 개발 키트(SDK)로, 단일 코드베이스로 Android, iOS, 웹, 데스크탑 애플리케이션을 만들 수 있습니다. API를 통해 외부 데이터와 상호작용하는 CRUD(생성, 읽기, 업데이트, 삭제) 작업은 현대 애플리케이션의 핵심 기능입니다. 이번 포스팅에서는 Flutter를 사용하여 API와 통합한 CRUD 작업을 구현하는 방법을 단계별로 설명하겠습니다.

개발 환경 설정

Flutter 설치
- Flutter SDK를 다운로드하고 설치합니다. 자세한 설치 방법은 Flutter 공식 문서를 참고하세요.

프로젝트 생성

flutter create crud_example
cd crud_example

필요한 패키지 추가
- HTTP 요청을 처리하기 위해 http 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다:
```
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
```
- 의존성을 설치합니다:
```
flutter pub get
```

데이터 모델 정의

먼저, API와 상호작용할 데이터 모델을 정의합니다. 예제에서는 Post 모델을 사용합니다:

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'title': title,
      'body': body,
    };
  }
}

API 서비스 구현

CRUD 작업을 위한 API 서비스를 구현합니다.

HTTP 클라이언트 설정

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

class ApiService {
  final String baseUrl = 'https://jsonplaceholder.typicode.com';

  Future<List<Post>> getPosts() async {
    final response = await http.get(Uri.parse('$baseUrl/posts'));
    if (response.statusCode == 200) {
      List jsonResponse = json.decode(response.body);
      return jsonResponse.map((post) => Post.fromJson(post)).toList();
    } else {
      throw Exception('Failed to load posts');
    }
  }

  Future<Post> createPost(Post post) async {
    final response = await http.post(
      Uri.parse('$baseUrl/posts'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(post.toJson()),
    );
    if (response.statusCode == 201) {
      return Post.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to create post');
    }
  }

  Future<Post> updatePost(int id, Post post) async {
    final response = await http.put(
      Uri.parse('$baseUrl/posts/$id'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(post.toJson()),
    );
    if (response.statusCode == 200) {
      return Post.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to update post');
    }
  }

  Future<void> deletePost(int id) async {
    final response = await http.delete(Uri.parse('$baseUrl/posts/$id'));
    if (response.statusCode != 200) {
      throw Exception('Failed to delete post');
    }
  }
}

UI 구현

CRUD 작업을 위한 간단한 UI를 구현합니다.

StatefulWidget 생성

class PostList extends StatefulWidget {
  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  late Future<List<Post>> futurePosts;
  final ApiService apiService = ApiService();

  @override
  void initState() {
    super.initState();
    futurePosts = apiService.getPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter API CRUD Example')),
      body: Center(
        child: FutureBuilder<List<Post>>(
          future: futurePosts,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final post = snapshot.data![index];
                  return ListTile(
                    title: Text(post.title),
                    subtitle: Text(post.body),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: Icon(Icons.edit),
                          onPressed: () {
                            // 업데이트 로직
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () {
                            setState(() {
                              apiService.deletePost(post.id);
                              futurePosts = apiService.getPosts();
                            });
                          },
                        ),
                      ],
                    ),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 생성 로직
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

메인 함수 수정

void main() {
  runApp(MaterialApp(
    home: PostList(),
  ));
}

CRUD 기능 추가

각각의 CRUD 기능을 위한 로직을 추가합니다.

Post 생성

void _createPost() async {
  final newPost = Post(id: 0, title: 'New Post', body: 'This is a new post');
  await apiService.createPost(newPost);
  setState(() {
    futurePosts = apiService.getPosts();
  });
}

Post 업데이트

void _updatePost(int id) async {
  final updatedPost = Post(id: id, title: 'Updated Post', body: 'This is an updated post');
  await apiService.updatePost(id, updatedPost);
  setState(() {
    futurePosts = apiService.getPosts();
  });
}

Post 삭제
- 이미 구현된 deletePost 메서드를 활용하여 목록에서 제거합니다.

결론

Flutter와 Dart를 사용하여 API를 통합한 CRUD 애플리케이션을 구축하는 것은 비교적 간단하고 직관적입니다. HTTP 패키지를 사용하여 RESTful API와 상호작용하고, FutureBuilder를 통해 비동기 데이터를 관리할 수 있습니다. 이러한 기능을 통해 강력하고 반응형 웹 및 모바일 애플리케이션을 쉽게 개발할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서와 Dart 공식 문서를 참고해 보세요.

저작자표시 비영리 변경금지

멋대로 정보봇

Flutter API CRUD: 강력한 모바일 애플리케이션을 위한 필수 가이드