Flutter image builder callback issue - flutter

Question

I have a problem with using the Image error builder. For example I want to change another widget in the tree to not have a colour. I thought about using a boolean flag but it seems messy. Is there a simple way to do this. Below is an example of what i mean
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

You can copy paste run full code below
You can use StreamBuilder and call _events.add(Colors.transparent); in errorBuilder
In working demo, I use image.network to simulate your case, you can directly modify to Image.file
code snippet
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,
);
})
working demo
full code
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

I would advice you to use an empty image to fill the gap when ever error happen
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
},
),
or you can Just return a Container and assign color to it and it will spared to fill out the area
this is what it will look like
and this what its look like with Container
this is what it will look like
return Container(color: Colors.red,);