SliverVariedExtentList

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverVariedExtentList.builder(
            itemCount: 30,
            itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
              if (index == 0) {
                return 0.3 * dimensions.viewportMainAxisExtent;
              } else if (index.isEven) {
                return 150.0;
              }
              return index < 5 ? 200.0 : 80.0;
            },
            itemBuilder: (BuildContext context, int index) {
              Widget child;
              if (index == 0) {
                child = const ListTile(
                  title: Text("Performant varied sizing on demand"),
                  subtitle: Text(
                      "with SliverLayoutDimensions, sizing can factor in:"
                      "\n\t• scroll offset\n\t• viewport width\n\t• viewport height"
                      "\n\t• preceding scroll offset"),
                  isThreeLine: true,
                );
              } else {
                child = Text('List Item $index');
              }
              return Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 8.0, horizontal: 50.0),
                child: Card(
                  color: index == 0
                      ? Colors.amber[100]
                      : Colors.yellowAccent[100]!.withOpacity(0.90),
                  child: Center(child: child),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}