Flutter 图像生成器回调问题

Question

我在使用图像错误生成器时遇到问题。例如，我想将树中的另一个小部件更改为没有颜色。我考虑过使用布尔标志，但它看起来很乱。有没有一种简单的方法可以做到这一点。下面是我的意思的一个例子

return Stack(
  children: [
    Image.file(
      File("Some path"),
      errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
        // If error builder draws i want the container below colour to become transparent...
        // how  do i do this?
        return Text('Error');
      },
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.red,
    ),
  ],
);

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用StreamBuilder 并在errorBuilder 中调用_events.add(Colors.transparent);
在工作演示中，我使用image.network模拟你的情况，你可以直接修改为Image.file
代码sn-p

Image.file(
  File(widget.path),
  errorBuilder:
      (BuildContext context, Object exception, StackTrace stackTrace) {
    _events.add(Colors.transparent);
    return Text('Error');
  },
),
StreamBuilder<Color>(
    stream: _events.stream,
    builder: (BuildContext context, AsyncSnapshot<Color> snapshot) {
      return Container(
        height: 100,
        width: 200,
        color: snapshot.data,
      );
    })

工作演示

完整代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ImageHandelError(
              path: 'https://picsum.photos/250?image=9',
            ),
            ImageHandelError(
              path: 'not exist',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class ImageHandelError extends StatefulWidget {
  String path;

  ImageHandelError({this.path});
  @override
  _ImageHandelErrorState createState() => _ImageHandelErrorState();
}

class _ImageHandelErrorState extends State<ImageHandelError> {
  StreamController<Color> _events;

  @override
  initState() {
    super.initState();
    _events = StreamController<Color>();
    _events.add(Colors.red);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.network(
          widget.path,
          errorBuilder:
              (BuildContext context, Object exception, StackTrace stackTrace) {
            _events.add(Colors.transparent);
            return Text('Error');
          },
        ),
        StreamBuilder<Color>(
            stream: _events.stream,
            builder: (BuildContext context, AsyncSnapshot<Color> snapshot) {
              return Container(
                height: 100,
                width: 200,
                color: snapshot.data,
              );
            })
      ],
    );
  }
}
      

Answer 2

我建议您在发生错误时使用空白图像来填补空白

 child: FadeInImage.assetNetwork(
                            image: "https://cdn-icons-png.flaticon.com/512/270/270014.png",
                            fit: BoxFit.fitWidth,
                            placeholder: Assets.logo_place_holder,//this the image you have prepared 
                            imageErrorBuilder: (_, __, ___) {
                              return Image.asset(Assets.logo_place_holder); //this is what will fill the Container in case error happened 
                            },
                          ),

或者你可以只返回一个容器并为其分配颜色，它会省去填充该区域 this is what it will look like

这就是 Container 的样子 this is what it will look like

return Container(color: Colors.red,);