깡샘의 플러터&다트 프로그래밍 13-5

CustomScrollView

한 영역에서 스크롤이 발생할 때 다른 영역도 함께 스크롤되게 한다.

• SliverList
• SliverFixedExtentList
• SliverGrid
• SliverAppBar

SliverList와 SliverGrid로 화면을 구성하고, SliverAppBar로 스크롤될 때 함께 스크롤할 화면을 구성한다.

---

---

SliverAppBar

floating: true, //다시 나타날 때 가장 먼저 나타내야 하는지 설정, 
//false로 지정하면 항목이 스크롤되어 모두 나온 후 마지막에 슬리버 앱바가 나오고,
//true면 항목이 스크롤되자마자 슬리버 앱바가 나온다.
pinned: false, //스크롤되어 접힐 때 모두 사라져야 하는지 설정 true면 접히더라도 한 줄이 남음
//false면 접혀서 모두 사라진다.
snap: true, //스크롤이 멈추었을 때 계속 나타내야 하는지 설정 
//floating이 true일 때만 설정 가능

---

커스텀 스크롤 뷰 활용하기

import 'package:flutter/material.dart';

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

class ch13_5 extends StatefulWidget {
  const ch13_5({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<ch13_5> {
  List<Widget> getWidgets() {
    List<Widget> widgets = [];
    for (var i = 0; i < 100; i++) {
      widgets.add(ListTile(
        title: Text('Hello world Item $i'),
      ));
    }
    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: CustomScrollView(
        slivers: [
          SliverAppBar(
            leading: IconButton(
              icon: const Icon(Icons.expand),
              onPressed: () {},
            ),
            expandedHeight: 200,
            floating: true,
            pinned: true,
            snap: false,
            elevation: 50,
            backgroundColor: Colors.pink,
            flexibleSpace: Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/Ralo.png'), fit: BoxFit.fill),
              ),
            ),
            title: const Text('AppBar title'),
            actions: <Widget>[
              IconButton(
                icon: const Icon(Icons.add_alert),
                onPressed: () {},
              ),
              IconButton(
                icon: const Icon(Icons.phone),
                onPressed: () {},
              ),
            ],
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text('Hello world Item $index'),
                );
              },
            ),
          )
        ],
      )),
    );
  }
}