mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Add the infinite_list sample (#440)
This PR adds a Flutter sample app that shows an implementation of the "infinite list" UX pattern. That is, a list is shown to the user as if it was continuous although it is internally paginated. This is a common feature of mobile apps, from shopping catalogs through search engines to social media clients.
This commit is contained in:
66
infinite_list/lib/main.dart
Normal file
66
infinite_list/lib/main.dart
Normal file
@@ -0,0 +1,66 @@
|
||||
// Copyright 2020 The Chromium Authors. 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:provider/provider.dart';
|
||||
|
||||
import 'src/catalog.dart';
|
||||
import 'src/item_tile.dart';
|
||||
|
||||
void main() {
|
||||
runApp(MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ChangeNotifierProvider<Catalog>(
|
||||
create: (context) => Catalog(),
|
||||
child: MaterialApp(
|
||||
title: 'Infinite List Sample',
|
||||
home: MyHomePage(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Infinite List Sample'),
|
||||
),
|
||||
body: Selector<Catalog, int>(
|
||||
// Selector is a widget from package:provider. It allows us to listen
|
||||
// to only one aspect of a provided value. In this case, we are only
|
||||
// listening to the catalog's `itemCount`, because that's all we need
|
||||
// at this level.
|
||||
selector: (context, catalog) => catalog.itemCount,
|
||||
builder: (context, itemCount, child) => ListView.builder(
|
||||
// When `itemCount` is null, `ListView` assumes an infinite list.
|
||||
// Once we provide a value, it will stop the scrolling beyond
|
||||
// the last element.
|
||||
itemCount: itemCount,
|
||||
padding: const EdgeInsets.symmetric(vertical: 18),
|
||||
itemBuilder: (context, index) {
|
||||
// Every item of the `ListView` is individually listening
|
||||
// to the catalog.
|
||||
var catalog = Provider.of<Catalog>(context);
|
||||
|
||||
// Catalog provides a single synchronous method for getting
|
||||
// the current data.
|
||||
var item = catalog.getByIndex(index);
|
||||
|
||||
if (item.isLoading) {
|
||||
return LoadingItemTile();
|
||||
}
|
||||
|
||||
return ItemTile(item: item);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user