자주 쓰이는 Flutter 핵심 라이브러리

Flutter는 강력한 오픈소스 UI 툴킷으로, 다양한 라이브러리를 활용해 개발 효율성을 극대화할 수 있습니다. 이번에는 실무에서 자주 쓰이는 Flutter 핵심 라이브러리들을 기능별로 정리하고, 각 라이브러리의 주요 기능 및 코드 예제를 제공하여 초보 개발자들도 쉽게 활용할 수 있도록 돕겠습니다.

1. 상태 관리를 위한 핵심 라이브러리

Flutter 개발에서 상태 관리는 필수적인 요소입니다. 대표적인 상태 관리 라이브러리로 Provider, Riverpod, GetX, BLoC가 있습니다.

(1) Provider

Provider는 Flutter 공식 추천 상태 관리 라이브러리로, 간단하고 직관적인 API를 제공해줍니다.


import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Provider 예제")),
        body: Center(
          child: Consumer(
            builder: (context, counter, child) => Text('${counter.count}'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read().increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

(2) GetX

GetX는 경량 상태 관리 라이브러리로, 코드량을 줄이고 높은 성능을 제공하는 특징이 있습니다.


import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}

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

class MyApp extends StatelessWidget {
  final CounterController c = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("GetX 예제")),
        body: Center(child: Obx(() => Text("${c.count}"))),
        floatingActionButton: FloatingActionButton(
          onPressed: c.increment,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

2. 네트워크 요청을 위한 라이브러리

(1) http 라이브러리

http는 간단한 API 요청을 수행할 때 아주 유용하게 사용합니다.


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

void fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
  if (response.statusCode == 200) {
    print(json.decode(response.body));
  }
}

void main() {
  fetchData();
}

(2) Dio 라이브러리

Dio는 http 보다 더 강력한 기능을 제공하며, JSON 자동 변환, 인터셉터, 시간 제한 등 많은 기능이 포함되어 있습니다.


import 'package:dio/dio.dart';

void fetchData() async {
  var dio = Dio();
  final response = await dio.get('https://jsonplaceholder.typicode.com/todos/1');
  print(response.data);
}

void main() {
  fetchData();
}

3. UI 개발을 위한 라이브러리

(1) Flutter Material 및 Cupertino

- Material 위젯: Android 스타일의 디자인을 구현합니다.

- Cupertino 위젯: iOS 스타일의 디자인을 구현합니다.

Material 버튼 예제


ElevatedButton(
  onPressed: () {},
  child: Text('Material Button'),
)

Cupertino 버튼 예제


CupertinoButton(
  onPressed: () {},
  child: Text('Cupertino Button'),
)

(2) Flutter Lottie (애니메이션 효과 추가)

Lottie 라이브러리는 JSON 기반 애니메이션을 적용할 수 있도록 도와줍니다.


import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Lottie.asset('assets/animation.json'),
      ),
    ),
  ));
}

결론

Flutter는 강력한 라이브러리 생태계를 가지고 있으며, 상태 관리, 네트워크 요청, UI 개발을 위해 다양한 핵심 라이브러리를 제공합니다. Provider나 GetX를 활용해 상태를 관리하고, Dio나 http를 이용해 네트워크 요청을 수행하며, Lottie 같은 라이브러리를 사용해 UI를 더욱 풍성하게 만들 수 있습니다. 이번 글에서 소개한 예제 코드를 활용해 Flutter 개발을 더욱 효율적으로 진행해 보면 좋을 것 같습니다.

lifechecking 님의 블로그