I've stumbled on a style I do not know how to achieve in flutter.
Basically, I have a settings page where users can see their profile picture.
As seen in the picture below, I'd like to achieve a shade around the image in the same colors as the image. I guess you could call it a bleed?
Add 2 Images in a Stack
Increase the size of the first image
Then Wrap second image BackdropFilter then add some Blur effect
you can play around with the values to get the result that you want
class MyApp extends StatelessWidget {
String NetworkImage =
'https://www.jamsadr.com/images/neutrals/person-donald-900x1080.jpg';
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: new Container(
child: new Center(
child: Stack(clipBehavior: Clip.hardEdge, children: [
Image(
image: Image.network(NetworkImage).image,
width: 360,
height: 360,
),
BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
child: Image(
image: Image.network(NetworkImage).image,
width: 350,
height: 350,
),
),
]),
),
),
),
);
}
}
sample code
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: CircleAvatar(
backgroundImage: AssetImage("assets/images/cook.png"),
),
)
Related
I am using something like this to add a shadow on images it works fine but the app misses few frames on navigating to next screen or comming back. On debuging using time line I came to knew the issue is with the image filter
the code
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Transform.translate(
offset: offset,
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaY: sigma, sigmaX: sigma, tileMode: TileMode.decal),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 0,
),
),
child: Opacity(
opacity: opacity,
child: ColorFiltered(
colorFilter: ColorFilter.mode(color, BlendMode.srcATop),
child: child,
),
),
),
),
),
child,
],
);
}
is there any alternat way to apply shadows on images with transparent background.
I want to create a 3D-like effect in my container. I dunno how to do it. Any help is appreciated.
Image
Thanks in advance.
That isn't anything 3D. It can easily be achieved by using the boxShadow property of decoration of the Container widget.
You can then play around with things like color, blurRadius to get the desired effect.
Sample code:
class Shadow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Shadow')),
body: Container(
color: Colors.black,
child: Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.5),
offset: Offset(0, 25),
blurRadius: 3,
spreadRadius: -10)
],
),
),
),
),
);
}
}
Output
I want a achieve a design like the one in the second screenshot with a faded background. So the upper half of the blurred background image is already fine, just the bottom half is missing a gradient into a fixed color (like black or white).
For clarification: I want only the background to fade into black without affecting the top layer (in this case the untouched image). I tried quite long now to get a suitable solution but unfortunately I did not find any.
Current state:
Goal:
Current code (first screenshot):
Container(
color: Colors.white,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(widget.storyData.coverURL),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
child: Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: Hero(
tag: widget.heroTagID,
child: CachedNetworkImage(
imageUrl: widget.storyData.coverURL,
placeholder: (context, url) => Padding(
padding: EdgeInsets.all(25),
child: Icon(Ionicons.image_outline),
),
),
),
),
),
)),
);
You can achieve that using Stack and LinearGradient.
I've replaced CachedNetworkImageProvider with simple NetworkImage so that the code can work on https://dartpad.dev/. The principle remains the same:
import 'dart:ui';
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/id/255/1440/3200',
),
fit: BoxFit.cover,
),
),
),
Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [Colors.black.withOpacity(0.0), Colors.black],
stops: [0.0, 1.0]
)
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Center(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: Hero(
tag: 'heroTag',
child: Image.network(
'https://picsum.photos/id/255/1440/3200',
)
),
),
)
),
],
);
}
}
You can tweak the colors and stops to get it exactly how you want it.
End result:
How is best way to create Flutter background gradient effect used in Apple TV app as screenshot below. It looks like it is gradient from white to whitish-greyish in the background behind movie images.
you can use container BoxDecoration boxShadow to achieve this.
here is a example
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 200,
child: Card(
child: Center(
child: Icon(
Icons.movie,
size: 150.0,
),
),
),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.white54,
blurRadius: 10.0,
offset: Offset(0, 10),
spreadRadius: 0.5,
),
]),
);
}
}
I'm trying to display a circular image with a shadow, but on Flutter web, the shadow gets cut at the edges, while working fine on mobile.
Minimum code to reproduce is:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
scrollDirection: Axis.horizontal,
children: [
Column(
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black, blurRadius: 12.0),
],
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1000&fit=clip')))),
],
)
],
),
),
);
}
}
I tried adding padding to the container but it didn't help, not sure what else to do.
Quick workaround - Add one more container on top and set it as transparent with your fixed size.
color: Colors.transparent
This makes it draw the entire container therefore not clipping it's child container, so you can add padding to the child and make enough space for the shadows.
Container(
width: 100,
height: 100,
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black, blurRadius: 12.0),
],
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg')))),
),
),
Reference: https://github.com/flutter/flutter/issues/32215#issuecomment-596143172