diff --git a/packages/flutter/lib/src/widgets/scroll_view.dart b/packages/flutter/lib/src/widgets/scroll_view.dart index 0dbec871911..0f28527e216 100644 --- a/packages/flutter/lib/src/widgets/scroll_view.dart +++ b/packages/flutter/lib/src/widgets/scroll_view.dart @@ -604,19 +604,78 @@ abstract class BoxScrollView extends ScrollView { /// padding. To avoid this behavior, override with a zero [padding] property. /// /// {@tool sample} -/// -/// An infinite list of children: +/// This example uses the default constructor for [ListView] which takes an +/// explicit [List] of children. This [ListView]'s children are made up +/// of [Container]s with [Text]. /// /// ```dart -/// ListView.builder( -/// padding: EdgeInsets.all(8.0), -/// itemExtent: 20.0, -/// itemBuilder: (BuildContext context, int index) { -/// return Text('entry $index'); -/// }, +/// ListView( +/// padding: const EdgeInsets.all(8.0), +/// children: [ +/// Container( +/// height: 50, +/// color: Colors.amber[600], +/// child: const Center(child: Text('Entry A')), +/// ), +/// Container( +/// height: 50, +/// color: Colors.amber[500], +/// child: const Center(child: Text('Entry B')), +/// ), +/// Container( +/// height: 50, +/// color: Colors.amber[100], +/// child: const Center(child: Text('Entry C')), +/// ), +/// ], /// ) /// ``` /// {@end-tool} +/// {@tool sample} +/// This example mirrors the previous one, creating the same list using the +/// [ListView.builder] constructor. Using the [IndexedWidgetBuilder], children +/// are built lazily and can be infinite in number. +/// +/// ```dart +/// final List entries = ['A', 'B', 'C']; +/// final List colorCodes = [600, 500, 100]; +/// +/// ListView.builder( +/// padding: const EdgeInsets.all(8.0), +/// itemCount: entries.length, +/// itemBuilder: (BuildContext context, int index) { +/// return Container( +/// height: 50, +/// color: Colors.amber[colorCodes[index]], +/// child: Center(child: Text('Entry ${entries[index]}')), +/// ); +/// } +/// ); +/// ``` +/// {@end-tool} +/// {@tool sample} +/// This example continues to build from our the previous ones, creating a +/// similar list using [ListView.separated]. Here, a [Divider] is used as a +/// separator. +/// +/// ```dart +/// final List entries = ['A', 'B', 'C']; +/// final List colorCodes = [600, 500, 100]; +/// +/// ListView.separated( +/// padding: const EdgeInsets.all(8.0), +/// itemCount: entries.length, +/// itemBuilder: (BuildContext context, int index) { +/// return Container( +/// height: 50, +/// color: Colors.amber[colorCodes[index]], +/// child: Center(child: Text('Entry ${entries[index]}')), +/// ); +/// }, +/// separatorBuilder: (BuildContext context, int index) => const Divider(), +/// ); +/// ``` +/// {@end-tool} /// /// ## Child elements' lifecycle ///