Related
I am using this kind of style in an app I'm trying to create for learning. Now the problem I have is that I only can make this using a RaisedButton but obviously sometimes I would need it to just be a container or sizebox, with no click effect. for example I use this code:
Widget titleSettings(String title){
return Container(
margin: EdgeInsets.fromLTRB(80.0, 0.0, 80.0, 20.0),
width: MediaQuery.of(context).size.width,
child: new RaisedButton(
padding: EdgeInsets.all(10.0),
elevation: 0.0,
color: Colors.white.withOpacity(.8),
highlightElevation: 0.0,
onPressed: () {
print("titleSettingPressed");
},
splashColor: Colors.white.withOpacity(.8),
highlightColor: Colors.white.withOpacity(.8),
shape: BeveledRectangleBorder(
side: BorderSide(color: Colors.black, width: 2.5),
borderRadius: new BorderRadius.circular(15.0)),
child: AutoSizeText("$title", style: TextStyle(fontSize: 30.0),),
)
);
}
but in this case I don't need to manage any click, It should only contain a text like it is in the child.
I've extracted below sample from the raised button definition inside flutter packages. check if its the same thing you're trying to reach:
child: Material(
elevation: 0.0,
type: MaterialType.button,
color: Colors.white.withOpacity(.8),
shape: BeveledRectangleBorder(
side: BorderSide(color: Colors.black, width: 2.5),
borderRadius: new BorderRadius.circular(15.0)),
child: IconTheme.merge(
data: IconThemeData(
color: Colors.white.withOpacity(.8),
),
child: Container(
padding: EdgeInsets.all(10.0),
child: Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: Text(
"Timers",
style: TextStyle(fontSize: 30.0),
),
),
),
),
),
I have to create a Card like this:
I had written below code to achieve the desired UI, but it didn't work as expected.
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
The code above produced this:
Whereas using the code below:
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output:
How can I create the required UI in flutter?
Use the shape parameter in the Card widget, example:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container() )
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
This solution worked for me. If we remove the shape property from the card, it leaves behind rectangular white corners. No limitation of elevation whatsoever.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
shadowColor: Colors.blueAccent,
elevation: 15,
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15))),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.red, width: 15)),
color: Colors.yellowAccent.shade100,
),
padding: EdgeInsets.all(20.0),
alignment: Alignment.centerLeft,
child: Container()),
),
)
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
For me, all the solutions using clipping cut off some of the shadow. Anyway, I found an easier solution imo:
Wrap the card's child around a Container widget. Specify the rounded rectangle border for the card, then the colored border side for the container.
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
child: Container(
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.red, width: 8)
),
child: // your card content
)
)
Instead of using a Card you could also use a Container to achieve this, you can use the gradient property on BoxDecoration. The stops property is going to determine the width of your border. Then you can add your colors and have a nice border.
For the rounded edges you can just use the borderRadius property.
Container(
margin: EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 8.0,
),
padding: EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 12.0,
),
child: Text('A "card" with rounded edges and a border'),
decoration: BoxDecoration(
gradient: LinearGradient(
stops: [0.015, 0.015],
colors: [
Colors.blue,
Colors.white,
],
),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
offset: Offset(0.0, 1.5),
),
],
),
)
Result from the code above
You can use the clipBehavior in the Card and move the BorderSide to a Container.
Card(
clipBehavior: Clip.antiAlias,
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.green, width: 5))),
),
)
I need to add shadows to some icons in my flutter project. I've checked the icon class constructors but nothing points to that. Any idea on how to implement that?
I got what i wanted eventually using this workaround. I hope it helps whoever might need something similar.
Stack(
children: <Widget>[
Positioned(
left: 1.0,
top: 2.0,
child: Icon(icon, color: Colors.black54),
),
Icon(icon, color: Colors.white),
],
),
The Icon widget has a shadows property with which you can give shadows to an icon.
const Icon(
icon,
shadows: <Shadow>[Shadow(color: Colors.black, blurRadius: 15.0)],
size: 60,
color: Colors.white,
)
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 5.0,
),
]
),
child: Icon(
Icons.fiber_manual_record,
color: Colors.amber,
size:15,
)
),
You can use IconShadowWidget().
How to use:
1. add dependencies to pubspec.yaml:
icon_shadow: ^1.0.1
2. Import your Dart code :
import 'package:icon_shadow/icon_shadow.dart';
3. add icons:
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconShadowWidget(
Icon(
Icons.add_circle,
color: Colors.red,
size: 100.0,
),
),
IconShadowWidget(
Icon(
Icons.add_circle,
color: Colors.red,
size: 100.0,
),
shadowColor: Colors.black,
),
IconShadowWidget(
Icon(
Icons.add_circle,
color: Colors.red,
size: 100.0,
),
shadowColor: Colors.black,
showShadow: false,
),
],
),
),
You can also check my GitHub Repository
Whenever you need elevation/shadow, remember the Card widget. So, you can wrap it with Card and SizedBox:
Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35.0),
),
child: SizedBox(
width: 35,
height: 35,
child: Icon(
Icons.close,
color: Colors.black,
size: 19,
),
),
)
Even better, here is an icon button with material bubble effect + shadow (in below GIF, shadow's quality looks like bad, it is because of GIF itself)
:
Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35.0),
),
child: ClipOval(
child: Material(
color: Colors.transparent, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(
width: 35,
height: 35,
child: Icon(
Icons.close,
color: Colors.black,
size: 19,
),
),
onTap: () {},
),
),
),
)
Took the idea from #Dzeri answer (https://stackoverflow.com/a/55668093/414635) and encapsulated it into a Widget so it became reusable.
Widget
class ShadowIcon extends StatelessWidget {
final IconData icon;
final Color color;
ShadowIcon(this.icon, {Key key, this.color: kLight}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
left: 0.5,
top: 0.5,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 1.0,
sigmaY: 1.0,
),
child: FaIcon(this.icon, color: kDark.withOpacity(0.7)),
),
),
FaIcon(this.icon, color: color),
],
);
}
}
The BackdropFilter doesn't seem to be working as expected but anyway all I needed was a subtle drop shadow. I'm also using the package font_awesome_flutter but you can replace the FaIcon by the native Icon widget.
Usage
Your can simply replace the native Icon by the ShadowIcon widget call:
IconButton(
icon: ShadowIcon(FontAwesomeIcons.chevronLeft, color: kLight),
onPressed: () => Get.back(),
),
InkWell(
child: Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: .5,
),
]),
child: Icon(
Icons.clear,
color: Colors.black,
size: 25,
)),
),
result will be like this pic:
:
Right now, it's not possible to directly add shadows to an Icon widget. You can however use the additional information from your IconData icon to display the icon as a styled text.
Text(
String.fromCharCode(Icons.add.codePoint),
style: TextStyle(
fontFamily: Icons.add.fontFamily,
color: Colors.white,
fontSize: 20.0,
shadows: [
BoxShadow(
color: ColorTheme.blackLight,
spreadRadius: 2,
blurRadius: 2,
)
],
height: 1 //if this isn't set, the shadow will be cut off on the top and bottom
)
);
Try this, use the icon font.
GestureDetector(
child: Container(
padding: EdgeInsets.only(right: 10, top: 10),
child: Text('\u{e5d3}',
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontFamily: 'MaterialIcons',
shadows: [
BoxShadow(color: Colors.black, blurRadius: 2)
])),
),
onTap: () {}
)
Icon data from icons.dart
/// <i class="material-icons md-36">more_horiz</i> — material icon named "more horiz".
static const IconData more_horiz = IconData(0xe5d3, fontFamily: 'MaterialIcons');
You can use decorated icon plugin to do shadow on icon
Code here :
Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DecoratedIcon(
Icons.android,
color: Colors.purple,
size: 60.0,
shadows: [
BoxShadow(
blurRadius: 42.0,
color: Colors.purpleAccent,
),
BoxShadow(
blurRadius: 12.0,
color: Colors.white,
),
],
),
DecoratedIcon(
Icons.favorite,
color: Colors.lightBlue.shade50,
size: 60.0,
shadows: [
BoxShadow(
blurRadius: 12.0,
color: Colors.blue,
),
BoxShadow(
blurRadius: 12.0,
color: Colors.green,
offset: Offset(0, 6.0),
),
],
),
DecoratedIcon(
Icons.fingerprint,
color: Colors.orange,
size: 60.0,
shadows: [
BoxShadow(
color: Colors.black,
offset: Offset(3.0, 3.0),
),
],
),
],
),
),
);
I know this is pretty late, but for anyone looking to add a shadow in circular form should wrap the icon with a CircleAvatar widget and set the backgroundColor proprety of CircleAvatar to Colors.grey.withOpacity (0.5) or to any other color for the shadow. Here's the code snippet
CircleAvatar (
bacgroundColor: Colors.grey.withOpacity (0.5),
child: Icon (
Icons.yourIcon
)
Material(
color: Colors.transparent,
elevation: 10,
child: Icon(
icons.add,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(100),
boxShadow: const [
BoxShadow(color: Colors.grey, blurRadius: 1),
],
),
child: const Icon(
FontAwesomeIcons.checkCircle,
size: 30,
color: Colors.green,
),
),
If the container size is the same as the icon size, then 3 pixels will be always downward, This is because I don't know. but this solution will clear it.
Make sure that the container size will increase by 3 pixels with icons size.
Container(
width: 33,
height: 33,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(100),
boxShadow: const [
BoxShadow(color: Colors.grey, blurRadius: 1),
]),
child: const Icon(
FontAwesomeIcons.checkCircle,
size: 30,
color: Colors.green,
),
),
base on this answer you can use this code and maybe add some change
import 'package:flutter/material.dart';
class IconShadowView extends Icon {
const IconShadowView(super.icon,
{super.key,
super.color,
super.semanticLabel,
super.shadows,
super.size,
super.textDirection});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: 1.0,
top: 2.0,
child: Icon(
icon,
color: Colors.black,
key: key,
semanticLabel: semanticLabel,
shadows: shadows,
size: size,
textDirection: textDirection,
),
),
super.build(context),
],
);
}
}
I've a Material widget to wrap a MaterialButton to make border radius, but I can't set the width attribute to it. I tried use a SizedBox but not works, the Material widget keep using all space of screen.
Code:
return new SizedBox(
width: 40,
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(22.0)),
elevation: 18.0,
color: Color(0xFF801E48),
clipBehavior: Clip.antiAlias,
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
height: 30.0,
child: new Text('Sair',
style:
new TextStyle(fontSize: 16.0, color: Colors.white)),
),
),
);
Result:
Clearly it not have 40.0 of width size.
A better approach is using Container widget. When you need to change width, height or add padding/margin to any widget you should wrap the target widget into a container. The container widget is for this kind of job.
Container(
width: myWidthValue, // Container child widget will get this width value
height: myHeghtValue, // Container child widget will get this height value
padding: allowPaddingToo, // padding is allowed too
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(22.0)),
elevation: 18.0,
color: Color(0xFF801E48),
clipBehavior: Clip.antiAlias, // Add This
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
height: 30.0,
child: new Text('Sair',
style:
new TextStyle(fontSize: 16.0, color: Colors.white)),
onPressed: () {
setState(() {
_isNeedHelp = false;
});
},
),
),
);
This is how you can set the size, padding, and margin of widgets in general. here is an example for Button:
Container(
margin: EdgeInsets.only(top: 10), // Top Margin
child:
ElevatedButton(
style: TextButton.styleFrom(
// Inside Padding
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
// Width,Height
minimumSize: Size(300, 30),
),
child: Text('Upload Data'),
onPressed: () {submitForm();},
),
),
Solved using Padding:
return Padding(
padding: EdgeInsets.fromLTRB(50, 0, 50, 0),
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(22.0)),
elevation: 18.0,
color: Color(0xFF801E48),
clipBehavior: Clip.antiAlias, // Add This
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
height: 30.0,
child: new Text('Sair',
style:
new TextStyle(fontSize: 16.0, color: Colors.white)),
onPressed: () {
setState(() {
_isNeedHelp = false;
});
},
),
),
);
Result:
I want to add a ripple on an item, it is working fine until I add a gradient on the item using BoxDecoration.
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: Material(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
elevation: 6.0,
shadowColor: Colors.grey[50],
child: InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: AlignmentDirectional.bottomStart,
end: AlignmentDirectional.topEnd,
colors: [
Colors.yellow[800],
Colors.yellow[700],
],
),
),
padding: EdgeInsets.all(16.0),
child: Text(
widget.title,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
),
),
);
}
Update in 2019:
You should use Ink widget inside Material, instead of Container.
It takes decoration parameter as well:
Material(
child: Ink(
decoration: BoxDecoration(
// ...
),
child: InkWell(
onTap: () {},
child: child, // other widget
),
),
);
I found the solution:
I need one Material for Inkwell, and one Material for elevation and rounded borders.
The inner Material has a type of MaterialType.transparency so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer Material.
Container(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: Material( // <----------------------------- Outer Material
shadowColor: Colors.grey[50],
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
elevation: 6.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: AlignmentDirectional.bottomStart,
end: AlignmentDirectional.topEnd,
colors: [
AppColors.pinkDark,
AppColors.pink,
],
),
),
child: Material( // <------------------------- Inner Material
type: MaterialType.transparency,
elevation: 6.0,
color: Colors.transparent,
shadowColor: Colors.grey[50],
child: InkWell( //<------------------------- InkWell
splashColor: Colors.white30,
onTap: () {},
child: Container(
padding: EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(
Icons.work,
size: 40.0,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Column(
children: <Widget>[
Text(
widget.title,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
],
)
],
),
),
),
),
),
),
);
Simple splash effect widget I created that works perfect.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SplashEffect extends StatelessWidget {
final Widget child;
final Function onTap;
const SplashEffect({Key key, this.child, this.onTap}) : super(key: key);
#override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(16)),
child: child,
onTap: onTap,
),
);
}
}
Splash color is overlap by container BoxDecoration
Try this
Widget build(BuildContext context) {
return new Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
gradient: LinearGradient(
begin: AlignmentDirectional.bottomStart,
end: AlignmentDirectional.topEnd,
tileMode: TileMode.repeated,
colors: [
Colors.yellow[800],
Colors.yellow[700],
],
),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.grey[50],
//blurRadius: 0.3,
blurRadius: 6.0,
offset: new Offset(0.0, 4.0)
)
]
),
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: Material(
color: Colors.transparent,
//shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
//elevation: 6.0,
//shadowColor: Colors.grey[50],
child: InkWell(
splashColor: const Color(0x8034b0fc),
onTap: () {},
child: Container(
//decoration: ,
padding: EdgeInsets.all(16.0),
child: Text(
'Click',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
),
),
);
}
If anyone came here looking to do use an inkwell with a circle decoration (like I did), I used the accepted answer to come up with this.
Material(
child: Ink(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[350],
border: Border.all(
color: Colors.red,
width: 4.0,
),
),
child: InkWell(
customBorder: const CircleBorder(),
onTap: onTap,
child: const Icon(Icons.add, size: 48, color: Colors.white),
),
));