My flutter app would like to show image from firebase by calling image.network(). But the images displaying late a bit.
Please kindly help to solve this issue. How to preload the images or save images into cache in advance?
child: ListTile(
leading: Image.network(
food.thumbnail,
width: 60.0,
),
title: Text(
food.foodName + " " + '\$' + food.foodPrice.toString()),
subtitle: Text('編碼： ' + food.foodCode),
onTap: () {}),
updated:
child: ListTile(
leading:
Image(image: new CachedNetworkImageProvider(food.thumbnail),
width: 60.0,),
title: Text(
food.foodName + " " + '\$' + food.foodPrice.toString()),
subtitle: Text('編碼： ' + food.foodCode),
onTap: () {}),
),
Please see my update that using CachedNetworkImageProvider, The image are also displaying late. I think I made some mistake. Please kindly help.
For cases like this, there is a Widget in flutter which comes out of the box and it is called FadeInImage. You can use it like this:
FadeInImage(
height: 200.0, // Change it to your need
width: 300.0, // Change it to your need
fit: BoxFit.cover,
placeholder: AssetImage("assets/company_logo.jpg"),
image: NetworkImage(your_image_url),
),
The important property here is the placeHolder, you can use any offline image stored in Assets like your company logo and when the images loads this will fade out and fresh image will fade in leading to a nice UX.
shimmer package is a good solution for preloading a shimmer effect
Related
When I try to add an image to the Appbar in Flutter as like the following:
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
centerTitle: true,
title: Image.asset('images/Ataxx.jpg'),
),
)
I get the following output:
As you see part of the image is missing from the top! how to correct this? Thanks.
As #rgisi suggests you really don't need to use PreferredSize() you just need to pass your image in the title.
appBar: AppBar(
titleSpacing: 0,
elevation: 0,
title: Image.network(
'https://images-eu.ssl-images-amazon.com/images/I/71ZFcWRAX7L.png',
fit: BoxFit.cover,
),
),
And for your use case if you really want to use PreferredSize() you can use that like this.
appBar: PreferredSize(
preferredSize: Size.fromHeight(100),
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
'https://images-eu.ssl-images-amazon.com/images/I/71ZFcWRAX7L.png',
fit: BoxFit.cover,
),
),
),
),
You will get something like this
First off, I think there's no need to use a PreferredSizeWidget because AppBar itself already implements PreferredSizeWidget.
Furthermore, I use FittedBox to place the image in the app bar - see the example code for how to use it.
I am learning Dart on Flutter.
I am trying to display an image from a URL using NetworkImage('URL'), but the picture is not displayed on my emulator, here is my code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MaterialApp(home: Test()));
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('This is a title.'),
centerTitle: true,
backgroundColor: Colors.red,
),
body: Center(
child: Image(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2017/09/25/13/12/dog-2785074_960_720.jpg'),),
),
floatingActionButton: FloatingActionButton(
child: Text('Click'),
onPressed: () {},
backgroundColor: Colors.teal[900],
),
);
}
}
What am I doing wrong?
Here is the error log:
After some research, I found the solution to my problem. Apparently, having LAN card enabled while you are on a Wifi network is the source of the problem.
I had to disable every network adapter that is not used except for my wireless card, and voilà.
Thank you, everyone, for taking the time to look into this problem, I hope this might help someone with the same problem.
I am making an application. The UI of login page i have shared. In this i used validation and due to that it shows validation message in red color below textformfield but it looks very ugly. Is there any way that we make this validation error message looks very good on screen like we do natively using different libraries?
You can customize the text field decoration in your form via InputDecoration widget, like in this example:
Your TextFormField widget:
TextFormField(
controller: controller,
decoration: InputDecoration(
labelText: "Example",
labelStyle: TextStyle(color: Colors.black),
errorStyle: TextStyle(color: Colors.red),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
),
validator: (value) {
if (value == null || value == '') {
return "Error";
}
},
)
In particular you can see this two properties:
errorBorder property
errorStyle property
I want to show an image of the network in BoxDecoration. But its showing error
"The argument type 'image' can't be assigned to the parameter type 'imageProvider'".
Here is the code where I am trying to show an image from the network inside box decoration. Please check and do let me know where I am wrong in this code.
decoration: new BoxDecoration(
image: new DecorationImage(image: new Image.network("http://myurl.com/"+productList[index].thumbnail),
fit: BoxFit.cover)
),
I've resolved the issue, it can be achieved using this code.
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage("urlImage"),
fit: BoxFit.cover)
),
if you want to load CachedNetworkImage then use in this way
*** https://pub.dev/packages/cached_network_image
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
Ammy's answer is right. However I would like to the answer my experience of using BoxDecoration().
To apply background image either from the Internet or from assets in Flutter app, we can use DecorationImage() class in image property of BoxDecoration().
Below is a code snippet, where background image is applied from an image from a URL in the Flutter app:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://www.exampledomain.com/images/background.jpg'),
fit: BoxFit.fill,
),
),
)
So, to apply background image in Container widget, we have to use decoration property. In the decoration property we supply a new BoxDecoration() object and this object should have an image property which points to the image resource URL. In the above snippet, image propery is instantiated a NetworkImage() object which is pointing to an image URL.
import 'package:flutter/material.dart';
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
String url = ""; //your url
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(url),
fit: BoxFit.cover,
),
),
);
}
}
Container(
decoration:BoxDecoration(
image: DecorationImage(
image:FileImage(
File(your_image_path),
),
),
),
),
If you are using decoration for backgroundImage and want to use CachedNetworkImage as backgroundImage.
You have to set background of the Container using Stack,i.e convert this to
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('backgroundimage.img'), <-- Your Background image
),
),
child: [ Your Foreground Widgets ]
)
to
Stack(
children: [
CachedNetworkImage(
imageUrl: image,
fit: BoxFit.cover,
),
[ Your Foreground Widgets ]
]
);
I'm trying to get a slide animation on a button inside a container but I'm unable to do it.
By the way, fade and flip was working fine.
I want to do animation like shown below when all buttons are shown.
Here's the image of what I am trying to achieve:
EDIT :
I am running the below code inside initialize() event of the container.
Ext.Anim.run(this.getComponent('btnId'),'flip',{
out: true,
delay: 1000,
duration: 500,
});
Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left',
duration: 1000
})
But the important thing is to ensure you require Ext.Anim in your application. Put this in your main app.js
Ext.requires('Ext.Anim');
or
Ext.application({
name: 'myapp',
requires: [
'Ext.Anim'
]
});
Hi #user1452041 try this please,
Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left'
})
direction attribute depend you if you want to left or right
I hope this helps. :) Ciao