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'),
),
),
),
I am trying to achieve a shadow like this,
This is my attempt, but its not working:
SliverPadding(
padding: const EdgeInsets.only(top: 20, left: 10, right: 10),
sliver: SliverToBoxAdapter(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius:
20.0, // has the effect of softening the shadow
spreadRadius:
5.0, // has the effect of extending the shadow
offset: Offset(
20.0, // horizontal, move right 10
100.0, // vertical, move down 10
),
)
],
color: Colors.black,
),
height: 150,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
child: Center(
child: Text(
'Withdraw Money',
style: khomeStyle.copyWith(
fontSize: 18,
color: kWhite,
),
),
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(14.0))),
height: 30,
width: 130),
)),
),
//Container(height: 90, color: Colors.red),
],
),
),
),
);
I cannot understand why isn't it working and the entire shadow is coming behind my Stack. Hoping someone can help me with this problem, I couldn't find a solution elsewhere.
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,
),
),
),
),
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.