Использование виджета CircularProgressIndicator при загрузке изображений из Firebase во Flutter

Question

Я хочу знать, как я могу добавить циркулярный индикатор прогресса к изображениям, которые я получаю из firebase. Когда я загружаю данные, сначала приходят тексты, затем изображения, и это кажется не элегантным. Вот мой код Пожалуйста, просмотрите мой код и помогите мне достичь этого. Заранее спасибо.

class MyApp extends StatefulWidget {
  static const String id = 'Myapp_screen';
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(0.0),
        child: StreamBuilder(
          stream: Firestore.instance.collection('news').limit(20).snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                  child: CircularProgressIndicator(
                value: null,
                strokeWidth: 2.0,
              ));
            } else {
              return ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) {
                  DocumentSnapshot documentSnapshot =
                  snapshot.data.documents[index];
                  return Container(
                    child: Card(
                      child: Column(children: <Widget>[
                        Image.network(documentSnapshot['images']),
                        Text(documentSnapshot['title'])
                      ]),
                    ),
                  );
                },
              );
            }
          },
        ));
  }
}

Answer 1

Для этого можно использовать свойство загрузки компоновщика.

Следующий код прояснит вашу идею.

Image.network(
          'https://previews.123rf.com/images/blueringmedia/blueringmedia1701/blueringmedia170100692/69125003-colorful-kite-flying-in-blue-sky-illustration.jpg',
          loadingBuilder: (BuildContext context, Widget child,
              ImageChunkEvent loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          },
        ),

Answer 2

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}