Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.
Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
),
),
)
You can use imageBuilder property of CachedNetworkImage
CachedNetworkImage(
imageUrl: 'yourURL',
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
This way you can decorate your CachedNetworkImage like a Container
A little late but I followed this approach
https://flutter.dev/docs/cookbook/images/fading-in-images
Using Stack, Padding, and the Container should do it. The bad thing here is the CircularProgressIndicator running in the background but it's invisible for the user. The Image should be bigger than the CircularProgressIndicator.
An example here
Stack(
children: <Widget>[
Padding(padding: const EdgeInsets.only(left: 10, top: 15),
child: CircularProgressIndicator(),
),
Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider(
'https://www.seti.org/sites/default/files/styles/original/public/2019-09/Zork%20alien%20head%20PPR.jpg?itok=T7eTYzCZ'),
),
),
),
],
)
The purpose of the Padding is to be behind the Image, no matter where it is.
For small images like this I think it is better the FadeInImage
FadeInImage(image: CachedNetworkImageProvider(url),
fit: BoxFit.cover,
placeholder: MemoryImage(kTransparentImage),
)
I have achieved this to some extent by using AdvancedNetworkImage
The issue now I am facing is rounding of top left and right corners does not work in the below code.
new Column(
children: [
Container (
height: 250.0,
width : double.infinity,
margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),
child: TransitionToImage(
AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
// placeholder: CircularProgressIndicator(),
duration: Duration(milliseconds: 300),
fit: BoxFit.cover,
loadingWidget: const CircularProgressIndicator(),
placeholder: const Icon(Icons.refresh),
enableRefresh: true,
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
padding: const EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.black,
borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black,
offset: Offset(0.0, -12.0),
blurRadius: 20.0,
),
],
),
// alignment: TextAlign.left,
child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
),
],
)
If anyone know the issue with rounding corners, please comment.
Related
I only want the image of container blurred (line:16). This is the code:
itemBuilder: (BuildContext context, int index) {
return Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 40, bottom: 20),
width: 250,
height: 450,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 2),
),
],
image: DecorationImage(
image: AssetImage(
Category_list[index]["background"]), //Blur this image
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
Category_list[index]["header"],
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w800,
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
width: 250,
height: 50,
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
child: TextButton(
onPressed: () => {},
child: Text(
"Chat",
style: TextStyle(color: Colors.black),
),
),
),
),
],
),
),
],
);
But to use BackdropFilter you have to use the child-property from the container but this would blur everything. Does anybody know how to only blur the image? Do I have to separate the image-widget from the rest? And if so how does it still cover the complete Stack?
You can use Stack() widget to show your title or anything on top of your blurred image.
Small sample example
Container(
height: 150,
width:150,
decoration: new BoxDecoration(
color:Colors.black,
image: new DecorationImage(
image: new NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKgi8mXs-MtRnwuZVUKo1BwTXnKIl--6qZPzWmT4k3BV1wlN-vMgV2BdICGGHlekwnkVk&usqp=CAU'),
fit: BoxFit.cover,
),
),
child: Stack(
children:[
new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
Text("Dog Name",style: TextStyle(fontSize: 22,),),
],
),
);
Below is the UI that I want to build,
Currently, I have used linear gradient to achieve this. But the issue is the linear gradient disappears when I use image in the Box Decoration.
Below is the code,
child: Container(
padding: EdgeInsets.all(10.0),
height: 180,
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: ColorSet.primaryGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
gradient: LinearGradient(
colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
//On uncommenting the below three lines, I do not see the linear gradient
// image: DecorationImage(
// image: AssetImage("lib/assets/images/event.jpg"),
// fit: BoxFit.cover,
// ),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 60.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
CustomIcons.test,
color: ColorSet.primaryRed,
),
Text(
flames.toString(),
style: TextStyles.captionStyle.copyWith(
color: ColorSet.primaryRed,
fontWeight: FontWeight.bold,
fontSize: 17.0),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${name}',
style: TextStyles.titleStyle.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
Basically I need linear gradient to be displayed on the image. As mentioned in the above code (In comments), if I remove the image in Box Decoration, the linear gradient works perfectly fine. But on adding the image back, the linear gradient is missing. I guess the linear gradient is not applying on the image.
Kindly help!!
do something like this for gradient and background image.
Container(
decoration: BoxDecoration(
image:
DecorationImage(image: AssetImage(image), fit: BoxFit.cover)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.black.withOpacity(.3),
Colors.black.withOpacity(.3),
]
)
),
)
)
A solution would be to Stack your current Container (with the LinearGradient and the Container child) on top of another Container defining the BoxShadow and the DecorationImage:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Scan with Time',
home: Scaffold(
body: MyWidget(),
),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10.0),
width: 240,
height: 480,
child: Stack(
children: [
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blueGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
image: DecorationImage(
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg/1280px-Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg'),
fit: BoxFit.cover,
),
),
),
),
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
gradient: LinearGradient(
colors: [
Colors.red,
Colors.transparent,
Colors.transparent,
Colors.red
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 240.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
Icons.directions_bike,
color: Colors.red,
),
Text(
'5',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 17.0,
),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('NAME',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
],
),
);
}
}
With help of card it is much easier
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
onTap: () => {},
child: Ink.image(
image: AssetImage(
'images/logo2.png',
),
fit: BoxFit.fill,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
);
}
I did this way
Instead of 2 widget I used 1 with foreground and decoration attributes
Container(
height: 150,
width: 150,
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(.0),
Colors.black.withOpacity(1),
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
image: DecorationImage(
image: AssetImage('images/logo2.png'),
),
),
),
Goal: Implementing perfect sized Circle Button with visible radius and Image as a child
Screenshot to demonstrate:
As you can see from the above picture, I tried many solutions that are mentioned here by the community here
Including:
CircleAvatar
CircleAvatar(
child: Image.asset('assets/images/gucci.jpg')
)
ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/gucci.jpg',
height: 100.0,
width: 100.0,
)
)
Material widget with Ink.image as a child widget
Material(
elevation: 1.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: Colors.transparent,
child: Ink.image(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
width: 120.0,
height: 120.0,
child: InkWell(
onTap: () {},
)
)
)
Any ideas on how to implement this design?
There are a lot of options for you. One of them is 'FloatingActionButton'.
SizedBox(
width: 60,
height: 60,
child: FittedBox(
fit: BoxFit.contain,
child: FloatingActionButton(
onPressed: () {},
shape: CircleBorder(
side: BorderSide(
color: Colors.black,
width: 1,
),
),
backgroundColor: Colors.white,
child: Padding(
padding: EdgeInsets.all(5),
child: Image.asset('assets/images/gucci.jpg'),
),
),
),
)
I would prefer it over Container since all the button's attributes like onPressed or tap animation are already implemented in FloatingActionButton and you don't need to use GestureDetector or InkWell.
Also you can use CircleBorder in any other Buttons or Widgets which accept a ShapeBorder.
I am guessing you want some padding and a border around the button.
SizedBox(
width: 100,
height: 100,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
border: Border.all(
width: 2,
color: Colors.black,
),
shape: BoxShape.circle,
),
child: Material(
elevation: 1.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: Colors.transparent,
child: InkWell(
child: Ink.image(
image: AssetImage('assets/images/gucci.jpg'),
),
),
),
),
),
You can try using Container() and GestureDetector() for tap functionality, I guess this will do
Code
GestureDetector(
onTap: (){},
child: Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover
)
)
)
)
You can change the thickness of the border by playing with the width in border: Border.all(color: Colors.black, width: 1.5) and for circular container, make changes in this line borderRadius: BorderRadius.circular(80),. This will help.
Wrap your Container with Inkwell or GestureDetector.
Here is sample code:
InkWell(
onTap: (){},
child: Container(
width: 65,
height: 65,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(50.5)),
border: new Border.all(
color: Colors.black,
width: 2.0,
),
),
),
)
GestureDetector(
onTap: (){},
child: Container(
width: 65,
height: 65,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(50.5)),
border: new Border.all(
color: Colors.black,
width: 2.0,
),
),
),
),
My Goal is to create like this
i want my image to show in the white big container and the background
i tried to do that
Stack(
overflow: Overflow.clip,
alignment: AlignmentDirectional.topCenter,
fit: StackFit.loose,
children: <Widget>[
Container(
height: 458.4,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)
)
),
),
GFAvatar(
backgroundImage:AssetImage(url),
shape: GFAvatarShape.standard,
radius: 70,
borderRadius: BorderRadius.circular(20),
)
],
),
]
and not working it is stacken in the container only
try to use Positioned inside the Stack and make the overflow Overflow.visible
Stack(
overflow: Overflow.visible,
alignment: AlignmentDirectional.topCenter,
fit: StackFit.loose,
children: <Widget>[
Container(
height: 400.4,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.amberAccent,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20))),
),
Positioned(
top: -50,
child: CircleAvatar(
radius: 50,
backgroundImage:
NetworkImage('https://picsum.photos/250?image=2'),
),
)
],
)
I'm trying to make a circular image box, but after using shape: Boxshape.circle, it is working properly on my current image. I'm sure that the shape property doesn't depend on the image pixel or any sort of thing.
I have this code:
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('MY_IMAGE')
)
)
)
]
)
)
],
);
I have read about the Boxdecoration from this link: Flutter - BoxDecoration. I'm confident that the shape should work but in my case, it is not working.
This is the result which I'm getting right now:
Use a ClipRRect inside a SizedBox :
Container(
child: new SizedBox(
height: 144.0,
width: 144.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(72.0),
child: new Image.asset('MY_IMAGE'),
),
),
),
Try this code
Container(
color: Colors.amber,// this is just for detection, rounded or not
child: Center(
child: new Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(72),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/img1.png')))),
),
)
Use the same code that you have posted in the question. But, instead of BoxFit.contain or BoxFit.fill, try using BoxFit.cover.
As it is mentioned in the comment by Mazin Ibrahim in the above answer, the actual height of your image must be less than the radius of the circular container, so even though the container is circular in shape you are not able to see it.
Check this link for more details.
For me it works using ClipOval in the child, and increasing a bit the image size with Transform.scale
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(40))),
child: ClipOval(
child: Transform.scale(
scale: 1.6,
child: Image.asset(
"my asset image",
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
),
)
For my case it worked like that -
Container(
height: (20.0),
width: (20.0),
decoration: const BoxDecoration(
shape: BoxShape.circle,
),
child: ClipOval(
child: SvgPicture.asset(
'assets/icons/$icon.svg',
fit: BoxFit.cover,
color: color,
),
),
)