Is there any way to set the floating action buttons color as a radial gradient in flutter? Something like below:
Set a container as the child of that FAB and assign a gradient to the container.
FloatingActionButton(
onPressed: () {},
tooltip: 'Cool FAB',
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
center: const Alignment(0.0, 0.0),
radius: 0.5,
colors: [ Color(0xFF0187D0), Color(0xFF01579C),],
),
),
),
),
It will look like:
EDIT:
For adding icon, you have to specify a size to your container and set the icon as it's child (I've used the FAB default size of 56x56).
FloatingActionButton(
onPressed: () {},
tooltip: 'Cool FAB',
child: Container(
width: 56,
height: 56,
child: Icon(Icons.settings),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
center: const Alignment(0.0, 0.0),
radius: 0.5,
colors: [ Color(0xFF0187D0), Color(0xFF01579C),],
),
),
),
),
And now it will look like:
Related
I am new to flutter and I want to add shadow to an image in Card (shadow just to an image not the text), how can I do that? Below is the snippet of my code, please let me know how can I do that, thank you.
child: Container(
height: 70,
child: Card(
child: ListTile(
onTap: () {},
title: Text(eventList[index].event_name),
leading: CircleAvatar(
backgroundImage: NetworkImage(eventList[index].imageURL),
),
),
),
),
you can wrap the CircleAvatar with another Container and specify the boxShadow property in its decoration, or for more accuracy, just use a DecoratedBox like this:
Container(
height: 70,
child: Card(
child: ListTile(
onTap: () {},
title: Text("eventList[index].event_name"),
leading: DecoratedBox(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(.2),
blurRadius: 5,
offset: const Offset(0, 10),
)
]),
child: CircleAvatar(
backgroundImage: NetworkImage("eventList[index].imageURL"),
),
),
),
),
);
You can simply use a Widget called PhysicalModel where it can easily show shadows. You can play with the properties such as color and elevation for your desired shadow effect.
https://api.flutter.dev/flutter/widgets/PhysicalModel-class.html
leading: PhysicalModel(
color: Colors.grey.withOpacity(0.8),
shape: BoxShape.circle,
elevation: 10.0,
child: const CircleAvatar(
backgroundImage: NetworkImage(
'https://i1.sndcdn.com/artworks-000486414654-mt7qdt-t500x500.jpg'),
),
),
I have a design as you can see below and the question is how can I apply this notch effect on Arrow ? Is there any easy way to do it just like in Floating Action Button ? Thanks in advance.
I have created Dartpad, please look into this and do let me know if you need any help.
Dartpad Link : https://dartpad.dev/flutter?9bd55396e067e71a839851e18905f478
Code:
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
height: 70,
child: Stack(alignment: Alignment.centerRight, children: [
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Container(
height: 70,
decoration: BoxDecoration(
color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
),
),
Container(
width: 40,
height: 65,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 5)),
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.cyan,
child: const Icon(Icons.chevron_right),
),
)
]),
),
);
Output:
Hey you can achieve it in 2 way
1st one and simple - Create a box decoration widget and a circle shape widget with white border and put these together with Stack and fit as per your requirements.
2nd use Custom Clipper or Custom Paint and draw your shape.
I need to make a nav bar with a floating action button just like this image:
what I have been able to make is in this picture :
The problem is that I wrapped my raw in a container, added box decoration to apply gradient property to my bottom nav bar which ended up deleting the white curve of the floating action button inside the nabber. I want to be able to preserve the white curve just like in the first image and be able to apply gradient colours only to my nav bar is it possible to do so without using a box decoration ?
Here's my code currently :
Widget build(BuildContext context) {
return SafeArea(child:
Scaffold(
floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
onPressed: (){
//code to execute on button press
},
child: Icon(Icons.add), //icon inside button
backgroundColor: kPrimaryColor,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//floating action button position to center
bottomNavigationBar: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
color: Colors.white,
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomAppBar( //bottom navigation bar on scaffold
color:Colors.transparent,
shape: CircularNotchedRectangle(), //shape of notch
notchMargin: 5, //notche margin between floating button and bottom appbar
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [kPrimaryColor, kPrimaryLightColor],
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0.1, 0.8],
tileMode: TileMode.clamp,
),
),
child: Row( //children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.home_filled, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.check_circle, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.analytics, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.person, color: Colors.white,), onPressed: () {},),
],
),
),
),
)
)
) );
}
If anyone knows the answer or can help I'd be grateful .
Add this inside the BottomAppBar
clipBehavior: Clip.antiAlias,
I am trying to make a gradient colored flat button but left and right edges of the button are not getting colorized as the image.
And here is my flatbutton codes:
return new Container(
width: MediaQuery.of(context).size.width,
height: 40,
child: RaisedButton(
focusNode: buttonFocusNode,
onPressed: () {},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.pink, Colors.purple],
),
),
),
),
);
}
It happens on both emulator and real device. My hyerarchy to button in build is : SafeArea->Scaffold->Container->Stack->Container->Column->Button. I tried to wrap it inside container, sizedbox, played with width but nothing helped. Any idea why this is happening and how can I solve it? Thanks in advance.
Solution with an ElevatedButton:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
clipBehavior: Clip.antiAlias, // <====== [2]
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), // <====== [1]
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.pink, Colors.purple],
),
),
child: Text(
'CLICK ME!',
style: TextStyle(color: Colors.white, fontSize: 48.0),
),
),
)
Important point 1
Since you remove the padding on the button, remember to add it on the child Container. Otherwise, you'll have problems once you add some text:
Important point 2
If you want rounded corners, remember to set the Clip Behavior of the button. Otherwise, you will not get your rounded corners:
Because RaisedButton adds padding for the child. You need to set the padding to EdgeInsets.zero.
Example
RaisedButton(
padding: EdgeInsets.zero,
I am trying to align 2 Texts and an Image as a child of a FlatButton (like this) but somehow the elements don't align as they should.
I tried using Stack, Align, Rows and so on but I weren't really successful (I am also a beginner when it comes to dart or flutter)
new ButtonTheme(
minWidth: 171,
height: 176,
child:new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(19),
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF8F94FB),
Color(0xFF5D62D4)
]
)
),
child: FlatButton(
onPressed: () => handleButtonClick(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
)
],
),
),
),
),
This is the result:Image
Replace your FlatButton with below code and see if it works for you.
FlatButton(
padding: const EdgeInsets.all(0),
onPressed: () => {
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Container(
width: 109,
height: 109,
child: Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
),
),
],
),
),
You can debug step by step. First, this is a technique that I use with me and my other fellows devs. In the child parameter, pass a Container, this container will receive a color, Colors.red for example, with that you can see how much size your container's area contain.
After that, if you want to centralize the content inside this Container, passa a Center as child, and the child of this Center widget, you can pass your Image, and define this Image's size.
child: Container(
color: Colors.red,
child: Center(
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
),
),
Tell me if this worked for you.