SliverAppBar 같은거를 쓸 때

CustomScrollView와 SliverList를 쓰게 될 일이 있다.

기존 ListView.builder 에서 변환하는 순서를 설명한다.

요약

1. ListView에 커서를 대고 Wrap with Widget 을 이용해서 SliverList로 감싸준다.
2. child를 delegate로 바꿔준다.
3. ListView.builder를 SliverChildBuilderDelegate로 바꿔준다.
4. itemBuilder 를 지운다.
5. itemCount 대신에 childCount를 넣어준다.

import 'package:flutter/material.dart';

class SliverSliverApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SliverSliver(),
      ),
    );
  }
}

class SliverSliver extends StatelessWidget {
  final data = "abcdefghi".split('');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return Container(
          height: 50.0,
          color: Colors.red[(index) * 100],
          child: Center(
            child: Text(
              data[index],
              style: TextStyle(
                  fontSize: 24.0,
                  color: Colors.black87,
                  fontWeight: FontWeight.w300),
            ),
          ),
        );
      },
    );
  }
}

import 'package:flutter/material.dart';

class SliverSliverApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SliverSliver(),
      ),
    );
  }
}

class SliverSliver extends StatelessWidget {
  final data = "abcdefghi".split('');

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            height: 50.0,
            color: Colors.red[(index) * 100],
            child: Center(
              child: Text(
                data[index],
                style: TextStyle(
                    fontSize: 24.0,
                    color: Colors.black87,
                    fontWeight: FontWeight.w300),
              ),
            ),
          );
        },
        childCount: data.length,
      ),
    );
  }
}