[033] 플러터 (Flutter) 배우기 - 상태 관리3 (get_it 사용)

안녕하세요~ totally 개발자입니다.

 

get_it

 

오늘은 get_it 패키지를 사용하는 방법에 대해 살펴보도록 하겠습니다. get_it은 DI(Dependency Injection): 의존성 주입 Library로서 InheritedWidget 및 provider를 대체할 수 있으며 주된 사용으로는 REST API 클라이언트 등을 포함한 데이버베이스 서비스 객체에 접근해서 사용할 때, View, BLoC 등 여러가지 객체에 접근해야 될 때 사용합니다. 

 

Step 1: 먼저 pubspec.yaml에 get_it, http 패키지를 설치해줍니다.

 

Step 2: 다음처럼 디렉토리를 구성해줍니다

 

 

 

Step 3: 먼저 model 폴더 내에 있는 album.dart를 아래처럼 작성해줍니다.

 

	class Album {
	int? userId;
	int? id;
	String? title;
	Album({this.userId, this.id, this.title});
	factory Album.fromJson(Map<String, dynamic> json) {
	return Album(userId: json['userId'], id: json['id'], title: json['title']);
	}
	}

view raw album.dart hosted with ❤ by GitHub

 

Step 4: service 폴더 내에 있는 album_service.dart를 작성해줍니다. (데이터를 가져옴)

 

	import 'dart:convert';
	import 'package:http/http.dart' as http;
	import '../model/album.dart';
	abstract class AlbumService {
	Future<List<Album>> fetchAlbums();
	}
	class AlbumServiceImplementation implements AlbumService {
	@override
	Future<List<Album>> fetchAlbums() async {
	final response = await http
	.get(Uri.parse('https://jsonplaceholder.typicode.com/albums'));
	final List<Album> result = jsonDecode(response.body)
	.map<Album>((json) => Album.fromJson(json))
	.toList();
	return result;
	}
	}

view raw album_service.dart hosted with ❤ by GitHub

 

Step 5: locator 폴더 내에 있는 locator.dart 파일을 작성해줍니다. 여기서 register하는 여러 메소드가 있는데 3가지 중요한 것들을 아래 표로 정리해서 살펴보겠습니다.

 

registerFactory	새로운 instance를 생성
registerSingleton	클래스의 단 한 개의 instance를 생성하여 반환
registerLazySingleton	registerSingleton과 거의 비슷하지만 실제로 이 클래스의 인스턴스가 사용되기 전까지는 초기화를 하지 않고 처음으로 사용될 때 인스턴스 초기화 진행 -> 자원과 메모리 절약

 

	import 'package:get_it/get_it.dart';
	import '../service/album_service.dart';
	GetIt locator = GetIt.instance;
	initLocator() {
	locator
	.registerLazySingleton<AlbumService>(() => AlbumServiceImplementation());
	}

view raw locator.dart hosted with ❤ by GitHub

 

Step 6: main.dart 파일을 수정해줍니다. 여기서 initLocator를 main 함수에 넣어주면 됩니다.

 

	import 'package:flutter/material.dart';
	import 'locator/locator.dart';
	import 'model/album.dart';
	import 'service/album_service.dart';
	void main() {
	initLocator();
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return const MaterialApp(
	title: 'GetIt 테스트',
	home: TestView(),
	);
	}
	}
	class TestView extends StatefulWidget {
	const TestView({super.key});
	@override
	State<TestView> createState() => _TestViewState();
	}
	class _TestViewState extends State<TestView> {
	final AlbumService _service = locator<AlbumService>();
	@override
	void initState() {
	super.initState();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: const Text("Get It 예제"),
	),
	body: FutureBuilder(
	future: _service.fetchAlbums(),
	builder: (context, snapshot) {
	if (snapshot.hasData) {
	List<Album>? list = snapshot.data;
	return ListView.builder(
	itemCount: list?.length,
	itemBuilder: (context, index) {
	return Container(
	padding: const EdgeInsets.all(15),
	child: Text("${list?[index].id}: ${list?[index].title}"),
	);
	},
	);
	} else if (snapshot.hasError) {
	return const Center(
	child: Text("오류 발생"),
	);
	} else {
	return const Center(
	child: CircularProgressIndicator(
	strokeWidth: 2,
	),
	);
	}
	},
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

 

Step 7: 실행 결과입니다.

 

 

get_it은 여러 방식으로 사용될 수 있기 때문에 아래 링크를 참고하셔서 활용하시면 됩니다.

https://pub.dev/packages/get_it 

get_it | Dart Package

 

[유튜브 강좌 영상]

 

https://youtu.be/SN85Vf2eoGY