슬리버 1

import 'package:flutter/material.dart';

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

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

// Sliver : 찢어진 조각 << 스크롤에 반응 할 수 있다.
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        // 요 안에만 슬리버 넣을 수 있다.
        slivers: [
          SliverAppBar(
            title: Text("앱바1"),
            pinned: false,
            floating: true,
            // floating & snap 쌍을 이룬다.
            snap: true,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("플렉시블 스페이스"),
              centerTitle: true,
              background: Image.network(
                "https://picsum.photos/200/300",
                fit: BoxFit.cover,
              ),
            ),
          ),

          //////////////////////

          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: 30,
              (context, index) {
                return ListTile(
                  title: Text("제목 $index"),
                );
              },
            ),
          ),

          // 화면을 꽉 채우는 것
          SliverFillViewport(
            delegate: SliverChildBuilderDelegate(
              childCount: 10,
              (context, index) {
                return Card(
                  child: Container(
                    color: Colors.blue[index % 9 * 100],
                    child: Text("ViewPort"),
                  ),
                );
              },
            ),
          ),
          //////////////////////
          SliverToBoxAdapter(
            child: Container(
              color: Colors.red,
              height: 300,
            ),
          ),
        ],
      ),
    );
  }
}