[PLAY STEEM x WebApp] Flutter Staggered Grid View 테스트

PLAY STEEM 모바일앱 개발자 이타인클럽입니다.

Flutter로 새롭게 웹앱을 만들고 있습니다.

오늘은 조금 재미있는 UI를 소개해 드릴께요.

바로 Staggered Grid View입니다.

Staggered Grid View

https://pub.dev/packages/flutter_staggered_grid_view

바로 아래처럼 Grid View가 일정하지 않게 배치된 형태를 Staggered Grid View라고 합니다. Staggered를 찾아보니 넘어질 거처럼 불안정학 걷는 것을 의미한다고 나오네요.

코드도 간단합니다. 아래와 같이 하면 정말 위 그림과 같은 모양이 나옵니다.

StaggeredGridView.countBuilder(
            crossAxisCount: 4,
            controller: _scrollController,
            physics: ScrollPhysics(),
            itemCount: state.posts.length,
            itemBuilder: (BuildContext context, int index) {
              final post = state.posts[index];
              print('post: $post');
              return PostView(post: post, isLiked: false);
            },
            staggeredTileBuilder: (int index) =>
                new StaggeredTile.count(2, index.isEven ? 2 : 1),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 24.0,
          ),

위 코드에서 다음을 통해서 스크롤도 잘 됩니다.

controller: _scrollController,
physics: ScrollPhysics(),

리스팀 / 보팅 / 댓글 / 팔로우 / 응원 부탁드립니다.

cc.
@steemcurator01
@steemitblog

https://playsteem.app