Sliver 수업 예제

appbar 기본

Sliver 기본

Sliver 정리 PDF.pdf

https://blog.naver.com/getinthere/223060684149

Sliver 내 학생 자료

Flutter(link) sliver 총 정리

Sliver ex01

Flutter CustomscrollView와 NestedScrollView

Sliver ex02

플러터 CustomScrollView(with SliverList) 위젯

Sliver ex03

Flutter SliverAppBar, SliverToBoxAdapter, SliverFixedExtentList, SliverChildBuilderDelegate

Sliver Header ex04

import 'package:flutter/material.dart';

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text("SliverAppBar1"),
            backgroundColor: Colors.red,
            pinned: false,
            expandedHeight: 250,
            flexibleSpace: Opacity(opacity: 0.6, child: Text("appbar1")),
          ),
          SliverPersistentHeader(
            delegate: MyHeader(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text("메뉴1"),
                    Text("메뉴2"),
                    Text("메뉴3"),
                  ],
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 200,
              color: Colors.yellow,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: 30,
              (context, index) {
                return Container(
                  height: 50,
                  color: Colors.lightBlue[100 * (index % 9)],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class MyHeader extends SliverPersistentHeaderDelegate {
  final Widget child;

  MyHeader({required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => 200;

  @override
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}