Я пытаюсь загрузить документы из пожарного магазина флаттера, где каждый из документов содержит URL-адрес изображения, а также некоторые другие данные. Каждый URL указывает на изображение в хранилище базы данных.
Дело в том, что когда я загружаю изображения в виде сетки Флаттера, прокрутка становится медленной. В настоящее время существует всего около 20 изображений. Вот мой код:
Согласно документации listview, когда ребенок выходит из поля зрения, он уничтожается, а затем восстанавливается, когда появляется на виду. Можно ли добиться чего-то подобного в gridview?
import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class WallpaperScreen extends StatefulWidget {
@override
_WallpaperScreenState createState() => _WallpaperScreenState();
}
class _WallpaperScreenState extends State<WallpaperScreen> {
int totalWallpapers;
StreamSubscription <QuerySnapshot> subscription;
List<DocumentSnapshot> wallpapersList;
NetworkImage networkImage;
final CollectionReference collectionReference = Firestore.instance.collection(
'wallpapers');
@override
void initState() {
// TODO: implement initState
super.initState();
subscription = collectionReference.snapshots().listen((datasnapshot) {
setState(() {
wallpapersList = datasnapshot.documents;
totalWallpapers = wallpapersList.length;
if (wallpapersList[1].data['url'] != null) {
networkImage = NetworkImage(wallpapersList[1].data['url']);
}
});
});
}
@override
void dispose() {
// TODO: implement dispose
subscription?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Color(0xff5e62),
expandedHeight: 200,
elevation: 8.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Image.asset('assets/icon.png', height: 30, width: 80, fit: BoxFit.cover),
),
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 1),
child: Text(
'Querencia',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100,
),
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.filter,
size: 10,
color: Colors.white,
),
Text(
' $totalWallpapers wallpapers',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100,
fontSize: 10,
),
),
],
),
),
],
),
),
background: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: networkImage, fit: BoxFit.cover,
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 9.0, sigmaY: 8.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.2)),
),
),
),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 0,
crossAxisSpacing: 0,
),
delegate: SliverChildBuilderDelegate((BuildContext context, int i) {
String imgUrl = wallpapersList[i].data['url'];
String imgID = wallpapersList[i].data['id'];
String thumbnail = wallpapersList[i].data['thumbnail'];
return Material(
elevation: 0,
child: InkWell(
child: Hero(
tag: imgID,
child: FadeInImage(
placeholder: AssetImage('assets/loader.png'),
image: NetworkImage(thumbnail),
fit: BoxFit.cover,
),
),
),
);
},
childCount: totalWallpapers,
),
),
],
),
);
}
}