[flutter] 플러터 프로바이더를 사용하여 그리드 레이아웃 만들기

22 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 그리드 레이아웃(grid layout)을 만들어야 하는 경우가 많습니다. 플러터 프로바이더(Provider)와 함께 그리드 레이아웃을 만드는 방법을 알아볼 것입니다. 프로바이더를 사용하면 상태 관리를 효율적으로 처리할 수 있으며, 그리드 레이아웃을 동적으로 조작하는 데 도움이 됩니다.

필요한 패키지 설치

먼저, 해당 기능을 구현하기 위해 provider 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그리고 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

프로바이더를 사용한 그리드 레이아웃 구현

이제, 프로바이더(Provider)를 사용하여 그리드 레이아웃을 구현해 보겠습니다. 우선, ChangeNotifier 클래스를 상속한 프로바이더 클래스를 정의합니다.

import 'package:flutter/foundation.dart';

class GridProvider with ChangeNotifier {
  int _columns = 2;
  
  int get columns => _columns;
  
  void setColumns(int columns) {
    _columns = columns;
    notifyListeners();
  }
}

위의 예시에서는 columns라는 변수를 통해 그리드의 열 수를 관리하고, setColumns 메서드를 사용하여 열 수를 변경할 수 있습니다.

그다음, GridView.builder 위젯을 사용하여 그리드를 구성하고, 해당 그리드 열의 수를 프로바이더를 통해 동적으로 설정합니다.

class GridScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GridProvider gridProvider = Provider.of<GridProvider>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid Layout with Provider'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: gridProvider.columns,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.blue,
            margin: EdgeInsets.all(8.0),
            height: 50.0,
          );
        },
        itemCount: 20,
      ),
    );
  }
}

위의 예시에서는 SliverGridDelegateWithFixedCrossAxisCount를 사용하여 그리드의 열 수를 동적으로 설정하고 있습니다.

마치며

프로바이더를 사용하여 그리드 레이아웃을 동적으로 조작하는 방법에 대해 알아보았습니다. 플러터 프로바이더를 통해 상태 관리를 간편하게 처리할 수 있으며, 그리드 레이아웃을 더 유동적으로 다룰 수 있습니다.

이제, 프로바이더를 활용하여 플러터 앱을 만들 때 보다 효율적으로 그리드 레이아웃을 다룰 수 있을 것입니다.