Skip to content

Instantly share code, notes, and snippets.

@takenoto
Created October 26, 2022 13:08
Show Gist options
  • Save takenoto/0072c9228f6d291985241fe37c1f53a2 to your computer and use it in GitHub Desktop.
Save takenoto/0072c9228f6d291985241fe37c1f53a2 to your computer and use it in GitHub Desktop.
2022-10-26 Ex: CustomScrollView / SingleChildScrollView / ListView.Builder
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),
);
}),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment