[flutter] 플러터 스택드 위젯을 사용하여 게시판 화면 구현하기

15 Dec 2023

flutter

플러터는 Dart 언어를 활용하여 모바일 애플리케이션을 개발할 수 있는 프레임워크입니다. 플러터의 “스택드” 위젯을 활용하면 게시판이나 뉴스피드와 같은 다채로운 UI를 구현할 수 있습니다. 이번에는 스택드 위젯을 사용하여 간단한 게시판 화면을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 추가하기

먼저, pubspec.yaml 파일에 다음과 같이 flutter_staggered_grid_view 패키지를 추가합니다.

dependencies:
  flutter_staggered_grid_view: ^0.4.0

그런 다음, 패키지를 설치하려면 터미널에서 아래 명령을 실행하세요.

flutter pub get

2. 스택드 그리드뷰 생성하기

이제, 아래의 코드를 사용하여 스택드 그리드뷰를 생성합니다. 이 예시에서는 flutter_staggered_grid_view 패키지를 이용하여 이미지 그리드를 구성하였습니다.

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

class StaggeredGridViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('게시판'),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 2,
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) => Container(
          color: Colors.green,
          child: Center(
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: Text('$index'),
            ),
          ),
        ),
        staggeredTileBuilder: (int index) =>
            StaggeredTile.count(1, index.isEven ? 2 : 1),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

3. 결과 확인하기

위 코드를 실행하면, StaggeredGridView.countBuilder를 사용하여 스택드 그리드뷰를 구성한 게시판 화면이 표시될 것입니다.

이처럼 플러터의 스택드 위젯을 활용하여 게시판과 같은 다양한 레이아웃을 구현할 수 있습니다. 플러터는 다양한 UI 구성을 위한 다양한 위젯들을 제공하고 있으므로, 창의적으로 활용하여 다채로운 애플리케이션을 개발할 수 있습니다.

참고 문헌: