[Flutter 심화] 4. Sliver (2)

Aug 04, 2025

SliverToBoxAdapter

원래 slivers에는 Sliver 타입의 위젯만 넣을 수 있음

일반 위젯을 감싸서 slivers에서 사용 가능하도록 어댑터 패턴을 쓴거임

전체 코드


import 'package:flutter/material.dart';

// SliverAppBar + SliverToBoxAdapter + SliverList(가로) + SliverList(세로)
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text("앱바"),
            pinned: false,
            snap: true,
            floating: true,
            expandedHeight: 250,
            flexibleSpace: Container(
              color: Colors.green,
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.red,
              height: 300,
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(
              height: 100,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 30,
                itemBuilder: (context, index) {
                  return Container(
                    width: 50,
                    color: Colors.yellow[((index % 9) + 1) * 100], // 0 ~ 8
                  );
                },
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: 20,
              (context, index) {
                return Container(
                  height: 50,
                  color: Colors.blue[((index % 9) + 1) * 100], // 0 ~ 8
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}