[flutter] 플러터 프로바이더를 이용한 동적 UI 생성

14 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter)에서 프로바이더(Provider)를 사용하여 동적으로 UI를 생성하는 방법에 대해 알아보겠습니다.

프로바이더(Provider)란?

프로바이더(Provider)는 플러터의 스테이트 매니지먼트(State Management) 라이브러리 중 하나로, 위젯 간의 데이터 공유를 간편하게 만들어주는 라이브러리입니다. 이를 통해 상태 관리를 보다 효율적으로 할 수 있으며, 이를 활용하여 동적 UI를 쉽게 구성할 수 있습니다.

동적 UI 생성하기

가장 먼저, 프로바이더를 사용하기 위해 provider 패키지를 프로젝트에 추가해야 합니다.

dependencies:
  provider: ^5.0.0

이제, 다음과 같은 간단한 예제를 통해 프로바이더를 이용하여 동적 UI를 생성하는 방법을 살펴보겠습니다.

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

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

class ItemList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final items = Provider.of<List<String>>(context);
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (context) => ItemModel(),
        child: Scaffold(
          appBar: AppBar(
            title: Text('Dynamic UI with Provider'),
          ),
          body: ItemList(),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Provider.of<ItemModel>(context, listen: false).addItem('New Item');
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

class ItemModel with ChangeNotifier {
  List<String> _items = ['Item 1', 'Item 2'];

  List<String> get items => _items;

  void addItem(String item) {
    _items.add(item);
    notifyListeners();
  }
}

이 코드는 ItemModel 클래스를 생성하고, 해당 모델의 데이터를 ChangeNotifierProvider를 통해 위젯 트리에 주입하며, ItemModel을 통해 아이템을 추가할 때마다 UI가 동적으로 업데이트되도록 구성된 간단한 예제입니다.

결론

프로바이더를 사용하면 플러터 애플리케이션에서 상태를 효율적으로 관리할 수 있으며, 이를 활용하여 동적 UI를 쉽게 구성할 수 있습니다. 프로바이더를 사용함으로써 코드의 가독성을 높이고, 유지보수를 용이하게 할 수 있다는 장점이 있습니다. 동적 UI를 구현해야 하는 경우, 프로바이더를 사용해보시기를 권해드립니다.