Question

我想下载包含进度和消息的图像。我想在对话框中显示它。每当我单击“下载”按钮时，就会下载图像并弹出容器，但是它不显示任何值。以下代码使用Image_downloader包。凸起按钮下载图像并显示没有任何值的空白容器；

import 'dart:async';
import 'dart:io';
import 'Download.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_downloader/image_downloader.dart';

void main() => runApp(HomePage());

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  String message = "";
  String path = "";
  int _progress = 0;

  @override
  void initState() {
    super.initState();

    ImageDownloader.callback(onProgressUpdate: (String imageId, int progress) {
      setState(() {
        _progress = progress;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  _downloadImage(
                    "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
                  );
                  showDialog(
                    context: context,
                    builder: (_) => FunkyOverlay(progress: _progress, message: message,),
                  );
                },
                child: Text("default destination"),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _downloadImage(String url,
      {AndroidDestinationType destination, bool whenError = false}) async {
    String fileName;
    String path;
    try {
      String imageId;

      if (whenError) {
        imageId = await ImageDownloader.downloadImage(url).catchError((error) {
          if (error is PlatformException) {
            var path = "";
            if (error.code == "404") {
              print("Not Found Error.");
            } else if (error.code == "unsupported_file") {
              print("UnSupported FIle Error.");
              path = error.details["unsupported_file_path"];
            }
            setState(() {
              message = error.toString();
              path = path;
            });
          }

          print(error);
        }).timeout(Duration(seconds: 10), onTimeout: () {
          print("timeout");
        });
      } else {
        if (destination == null) {
          imageId = await ImageDownloader.downloadImage(url);
        } else {
          imageId = await ImageDownloader.downloadImage(
            url,
            destination: destination,
          );
        }
      }

      if (imageId == null) {
        return;
      }
      fileName = await ImageDownloader.findName(imageId);
      path = await ImageDownloader.findPath(imageId);
    } on PlatformException catch (error) {
      setState(() {
        message = error.message;
      });
      return;
    }

    if (!mounted) return;

    setState(() {
      message = 'Image Downloaded';
    });
  }
}

这是弹出容器部分

import 'package:flutter/material.dart';

class FunkyOverlay extends StatefulWidget {
  String message;
  int progress;
  FunkyOverlay({@required this.message, @required this.progress});

  @override
  State<StatefulWidget> createState() => FunkyOverlayState(message, progress);
}

class FunkyOverlayState extends State<FunkyOverlay>
    with SingleTickerProviderStateMixin {
  String message;
  int progress;
  FunkyOverlayState(this.message, this.progress);

  AnimationController controller;
  Animation<double> scaleAnimation;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    scaleAnimation =
        CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

    controller.addListener(() {
      setState(() {});
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: ScaleTransition(
          scale: scaleAnimation,
          child: Container(
            decoration: ShapeDecoration(
              color: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(50.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text('Downloaded: $progress'),
                  Text(message)
                ],
              ),

            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用StreamBuilder接收来自onProgressUpdate的进度

class HomePageState extends State<HomePage> {
  ...

  @override
  void initState() {
    super.initState();
    _events = new StreamController<int>.broadcast();;
    _events.add(0);

    ImageDownloader.callback(onProgressUpdate: (String imageId, int progress) {
      setState(() {
        print("progress $progress");
        _progress = progress;
        _events.add(progress);
      });

return StreamBuilder<int>(
        stream: _events.stream,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {         
          return Center(
          ...
          children: <Widget>[
                        Text('Downloaded: ${snapshot.data.toString()}'),
                        Text(message)

工作演示

完整代码

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:image_downloader/image_downloader.dart';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

StreamController<int> _events;

class HomePageState extends State<HomePage> {
  String message = "";
  String path = "";
  int _progress = 0;

  @override
  void initState() {
    super.initState();
    _events = new StreamController<int>.broadcast();
    ;
    _events.add(0);

    ImageDownloader.callback(onProgressUpdate: (String imageId, int progress) {
      setState(() {
        print("progress $progress");
        _progress = progress;
        _events.add(progress);
        if (progress == 100) {
          Navigator.pop(context);
        }
      });
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _events.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                _events.add(0);
                _downloadImage(
                  "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
                );
                showDialog(
                  context: context,
                  builder: (_) => FunkyOverlay(
                    progress: _progress,
                    message: message,
                  ),
                );
              },
              child: Text("default destination"),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _downloadImage(String url,
      {AndroidDestinationType destination, bool whenError = false}) async {
    String fileName;
    String path;
    try {
      String imageId;

      if (whenError) {
        imageId = await ImageDownloader.downloadImage(url).catchError((error) {
          if (error is PlatformException) {
            var path = "";
            if (error.code == "404") {
              print("Not Found Error.");
            } else if (error.code == "unsupported_file") {
              print("UnSupported FIle Error.");
              path = error.details["unsupported_file_path"];
            }
            setState(() {
              message = error.toString();
              path = path;
            });
          }

          print(error);
        }).timeout(Duration(seconds: 10), onTimeout: () {
          print("timeout");
        });
      } else {
        if (destination == null) {
          imageId = await ImageDownloader.downloadImage(url);
        } else {
          imageId = await ImageDownloader.downloadImage(
            url,
            destination: destination,
          );
        }
      }

      if (imageId == null) {
        print("imageId is null");
        return;
      }
      fileName = await ImageDownloader.findName(imageId);
      path = await ImageDownloader.findPath(imageId);
    } on PlatformException catch (error) {
      setState(() {
        message = error.message;
      });
      return;
    }

    if (!mounted) return;

    setState(() {
      message = 'Image Downloaded';
    });
  }
}

class FunkyOverlay extends StatefulWidget {
  String message;
  int progress;
  FunkyOverlay({@required this.message, @required this.progress});

  @override
  State<StatefulWidget> createState() => FunkyOverlayState(message, progress);
}

class FunkyOverlayState extends State<FunkyOverlay>
    with SingleTickerProviderStateMixin {
  String message;
  int progress;
  FunkyOverlayState(this.message, this.progress);

  AnimationController controller;
  Animation<double> scaleAnimation;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    scaleAnimation =
        CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

    controller.addListener(() {
      setState(() {});
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    print("StreamBuilder build");
    return StreamBuilder<int>(
        stream: _events.stream,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          print("snapshot.data ${snapshot.data.toString()}");
          return Center(
            child: Material(
              color: Colors.transparent,
              child: ScaleTransition(
                scale: scaleAnimation,
                child: Container(
                  decoration: ShapeDecoration(
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(50.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text('Downloaded: ${snapshot.data.toString()}'),
                        Text(message)
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }
}

如何将信息从一个屏幕传递到另一个屏幕

1 个答案: