Flutter 다양한 스크롤 제공하기 CustomScrollView

CustomScrollView라는 단어만 봐도 뭔가 커스텀이 가능한 스크롤이 있는 화면같은 느낌이다

CustomScrollView는 보통 Sliver라는 단어가 들어가는 위젯과 함께 쓰는 듯 하니 한번 해보겠다

 

1. 코드 생김새

 

위의 코드를 보면, 우선 CustomScrollView가 제일 엄마이고, 그안에 slivers라는 배열을 선언한 것을 볼 수 있다

slivers 배열안에는 SliverGrid가 있는 것을 볼 수가 있는데, SliverGrid이외에 Sliver****라는 위젯을 사용할 수가 있다

우선 문법으로는 위와같이 사용하면 된다.

 

2. 전체 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> imageList = [
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
    ];

    return CustomScrollView(
      slivers: [
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Image.asset(
                imageList[index],
                fit: BoxFit.cover,
              );
            },
            childCount: imageList.length,
          ),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              mainAxisExtent: 200,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1),
        ),
      ],
    );
  }
}

SliverGrid를 사용했을때,

delegate는 SliverChildBuilderDelegate를 보통 사용하는 것 같다

gridDelegate는 SliverGridDelegateWithMaxCrossAxisExtent를 보통 사용하는 것 같다

SliverGridDelegateWithMaxCrossAxisExtent: 그리드 뷰에 들어올 하나의 항목에 최대 크기를 지정하고 이 값에 따라 교차 축의 범위를 균등하게 나눈다

maxCrossAxisExtent: 가로 사이즈인듯 하다

mainAxisExtent: 세로 사이즈인듯하다

crossAxisSpacing: 가로 양쪽 패딩?,

mainAxisSpacing: 세로 위아래 패딩?,

childAspectRatio: Grid의 Gap인듯 하다

 

3. 결과를 확인 해보자

위와 같은 결과가 나왔는데, 스크롤도 내릴 수 있다.

CustomScrollView가 무슨효과가 있는지 아직 확인할 수 없지만,,, 하나씩 알아가는게 우리사이 아니겠나