2022-10-26 Ex: CustomScrollView / SingleChildScrollView / ListView.Builder

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const 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> {
  int _index = 0;

  void _setIndex(int index) {
    setState(() {
      _index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: Container(
        padding: const EdgeInsets.all(12),
        color: Colors.grey,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                _setIndex(0);
              },
              child: const Text('SINGLE CHILD'),
            ),
            ElevatedButton(
              onPressed: () {
                _setIndex(1);
              },
              child: const Text('CUSTOM SCROLL'),
            ),
            ElevatedButton(
              onPressed: () {
                _setIndex(2);
              },
              child: const Text('ListView.Builder'),
            ),
          ],
        ),
      ),
      body: IndexedStack(
        index: _index,
        children: [
          //Single Child Scroll View
          SingleChildScrollView(
            child: Column(
              children: [
                Text('single child scroll view',
                    style: Theme.of(context).textTheme.headline2),
                Text(
                    'essa é uma view muito muito muito longa, e é toda carregada de uma vez só',
                    style: Theme.of(context).textTheme.headline3),
                Container(color: Colors.green, height: 300),
                Container(color: Colors.purple, height: 300),
                Container(color: Colors.red, height: 300),
                Container(color: Colors.amber, height: 300),
                Container(color: Colors.black, height: 300),
                Text(
                    'essa é uma view muito muito muito longa, e é toda carregada de uma vez só',
                    style: Theme.of(context).textTheme.headline3),
                Container(color: Colors.pink, height: 300),
                Container(color: Colors.grey, height: 300),
                Container(color: Colors.blue, height: 300),
              ],
            ),
          ),
          //Custom Scroll View
          CustomScrollView(
            slivers: [
              const SliverAppBar(
                expandedHeight: 125,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('AppBar personalizada da CustomScrollView'),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    if (index == 0) {
                      return Text(
                          'Essa sliver list é super performática porque faz cada item que está na tela um por ver, ao invés de renderizar tudo e arrastar tudo também de um lado pro outro',
                          style: Theme.of(context).textTheme.headline2);
                    } else {
                      return Container(
                        padding: const EdgeInsets.all(10.0),
                        color: Colors.amber[100 * (2 + (index % 7))],
                        child: Text(
                            'customScroll > SliverList > item nº: $index',
                            style: Theme.of(context).textTheme.headline6),
                      );
                    }
                  },
                  childCount: 45,
                ),
              ),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.pink[300],
                  padding: const EdgeInsets.all(48),
                child: const Text(
                    "É POSSÍVEL TAMBÉM ADICIONAR GRIDS COM A LIST, TUDO EM UM \"SCROLL\" SÓ!"),
                ),
              ),
              //Copiei isso direto dos exemplos do flutter
              //https://api.flutter.dev/flutter/widgets/SliverGrid-class.html
              SliverGrid(
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 4.0,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.teal[100 * (index % 9)],
                      child: Text('grid item $index'),
                    );
                  },
                  childCount: 80,
                ),
              ),
            ],
          ),

          //List view builder
          ListView.builder(
              itemCount: 200,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Text(
                      'List View builder também tem excelente performance, mas só é possível ter uma lista de coisas, e não dá pra misturar com grids.',
                      style: Theme.of(context).textTheme.headline2);
                }
                return Container(
                  padding: const EdgeInsets.all(10.0),
                  color: Colors.purple[100 * (3 + (index % 6))],
                  child: Text('listView.Builder item nº $index',
                      style: Theme.of(context).textTheme.headline6),
                );
              }),
        ],
      ),
    );
  }
}