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
Related
I want to achieve this:
and I got this:
This is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration
(color: Color(0xffF24004),
),
child: Container(
width: 202,
height: 196,
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
shape: BoxShape.circle, color : Color(0xffF2B749),
)),
),
),
);
}
}
I tried fit:BoxFit.cover but it doesn't work
So, how t solve this issue?
Thank you in advance
You can give backgroundcolor to the Scaffold as well. Try out this below code.
Scaffold(
backgroundColor: Color(0xffF24004),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 202,
height: 196,
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffF2B749),
),
),
// Add Another Icon Here
],
),
),
Remove the Center widget, you can also set the background color of the Scaffold directly
You can also use a Column right under the scaffold and set main, and cross axis alignments to center
But to achieve the design you posted you should probably use a Stack widget, coupled with Positioned widgets
Scaffold(
backgroundColor: Color(0xffF24004),
body: Center(
child: Container(
width: 202,
height: 196,
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffF2B749),
),
),
),
),
You have to give backgroundColor to Scaffold only:-
backgroundColor: Color(0xffF24004)
I made a container that supposed to show a picture with a colored border around it, with the addition borderRadius I set it to 8, but then I notice when I set the container to clip the content, it makes the border corner fade like the following:
Here's how I wrote it
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: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: const BorderRadius.all(Radius.circular(16)),
),
clipBehavior: Clip.antiAlias,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.blue,
),
),
),
),
);
}
}
I want the content not to overlap the border I have, how to do that?
I want the content not to overlap the border I have, how to do that?
To achieve this, you'll need to set the foregroundDecoration and decoration properties of the Container, the difference between the two is that,foregroundDecoration will paint the decoration in front of the child and decoration will paint behind the child, that is why you get the clipping when just using decoration
Note: Setting foregroundDecoration with a clipBehavior will trigger an AssertionError as clipBehavior must be specfied with a decoration
Updating your code to the following, to get the desired effect:
Center(
child: Container(
height: 300,
width: 300,
foregroundDecoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: const BorderRadius.all(Radius.circular(16)),
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16)),
),
clipBehavior: Clip.antiAlias,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.blue,
),
),
),
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"),
),
)
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 have a simple screen with a container about 100 in height and with blue color. I want to add a shadow or elevation at the bottom of the container.
This is my code below
import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';
void main() {
runApp(new IncomeFragment());
}
class IncomeFragment extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
new Container(
height: margin_100dp,
color: colorPrimary,
),
new Container( //container to overlay on top of blue container
alignment: Alignment.topCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
zero_amount,
style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
),
],
),
)
],
);
}
}
can someone help me to add a shadow or elevation at the bottom of my blue container?
see image below. shawdow should be in place in the red circle
thanks in advance
You can reuse the first container that you have in your Stack, the container has a property called decoration and it accept a widget of kind BoxDecoration, as you can see in this link: BoxDecoration
Inside this widget you can use the boxShadow property to give to your container a custom shadow, try the next code:
new Container(
height: margin_100dp,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: colorPrimary
),
),
Or you can wrap your Container widget with a Material widget which contains an elevation property to give the shadowy effects.
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Material(
elevation: 15.0,
child: Container(
height: 100,
width: 100,
color: Colors.blue,
child: Center(child: Text("Material",style: TextStyle(color: Colors.white),)),
),
),
SizedBox(width: 100,),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: Colors.blue
),
child: Center(child: Text('Box Shadow',style: TextStyle(color: Colors.white))),
),
],
),
),
Image:
Difference between two widgets is shown above. Hope this helps!!!
Yes, BoxShadow can solve the problem but instead of manually adding the list of BoxShadow, there is a handy map in flutter call kElevationToShadow which map elevation keys to pre-defined list of BoxShadow. It is also defined based on the material design elevation.
Container(
height: 60.0,
decoration: BoxDecoration(
boxShadow: kElevationToShadow[4],
color: Theme.of(context).bottomAppBarColor,
),
child: ...
);
Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[2], // Use This kElevationToShadow ***********
),
child: Center(child: Text('With BoxShadow')),
),
Material( // Using Material Widget ***********************
elevation: 5,
borderRadius: BorderRadius.circular(10),
child: Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Center(child: Text('With BoxShadow')),
),
),
use the Container Shadow as below:
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0,
),
],
),
Controll the blurRadius and the SpreadRadius depending on your needs
if you want a container to have shadow only top
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 218, 218, 218),
blurRadius: 10.0, // soften the shadow
spreadRadius: 0.0, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
-15.0, // Move to bottom 10 Vertically
),
)
],
You can add several BoxShadow to show the shadow you need,
with OffSet propertie you can move the shadow.
boxShadow: [
BoxShadow(
color: Colors.blue,
offset: Offset(0, 8), // hide shadow top
blurRadius: 5),
BoxShadow(
color: Colors.white, // replace with color of container
offset: Offset(-8, 0), // hide shadow right
),
BoxShadow(
color: Colors.white, // replace with color of container
offset: Offset(8, 0), // hide shadow left
),
],