I want the icon details to point upward like as shown in the image.
but the list of material icon has icon details points to downward,
so how can I rotate the material icon in my flutter project, without downloading the icon image.
Column(
children: <Widget>[
Container(
height: 48,
decoration: BoxDecoration(
color: Color(0xFFFBBC05),
borderRadius: BorderRadius.circular(48),
boxShadow: [
BoxShadow(
blurRadius: 16,
offset: Offset(0, 8),
color: Color(0XFFFBBC05),
spreadRadius: -10)
]),
child: IconButton(
icon: Icon(
Icons.details,
color: Colors.white,
),
onPressed: null,
),
),
SizedBox(
height: 8,
),
Text(
"Historical",
style: TextStyle(fontFamily: 'AirbnbCerealMedium', fontSize: 12),
),
],
)
You can wrap your IconButton in a Transform widget using the rotate constructor:
import 'dart:math' as math;
Transform.rotate(
angle: 180 * math.pi / 180,
child: IconButton(
icon: Icon(
Icons.details,
color: Colors.white,
),
onPressed: null,
),
),
Another solution is:
RotatedBox(
quarterTurns: 2,
child: IconButton(
icon: Icon(
Icons.details,
color: Colors.white,
),
onPressed: null,
),
),
Transform.rotate(
angle: 180 * pi / 180,
child: IconButton(
icon: Icon(
Icons.details,
color: Colors.white,
),
onPressed: null,
),
),
If you want to rotate icons like arrow_forward_ios, could help following code.
icon: Transform.rotate(
angle: 90 *math.pi /180,
child: Icon(Icons.arrow_forward_ios,
color: Colors.white,size: 18,),,
One solution could be to use the Transform widget.
Column(children: <Widget>[
Container(
height: 48,
decoration: BoxDecoration(
color: Color(0xFFFBBC05),
borderRadius: BorderRadius.circular(48),
boxShadow: [
BoxShadow(
blurRadius: 16,
offset: Offset(0, 8),
color: Color(0XFFFBBC05),
spreadRadius: -10)
]),
child: Transform( //<--- This changed
transform: Matrix4.rotationX(90),
child: IconButton(icon: Icon(Icons.details), onPressed: () {})),
),
SizedBox(
height: 8,
),
Text(
"Historical",
style: TextStyle(fontFamily: 'AirbnbCerealMedium', fontSize: 12),
),
])
Related
I have OutlinedButton with Row inside it with Icons on left and right and text between them.
This is how it's looking
and how it's implemented in code:
Container(
width: size.width * 0.4,
child: OutlinedButton(
onPressed: () {
},
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Color(0xFF44A5FF)
)
),
child: Container(
width: size.width * 0.4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.star_outline, color: Color(0xFF44A5FF)),
Container(
width: (size.width * 0.3) * 0.6,
child: AutoSizeText(
selectedValue!,
style: TextStyle(
color: Color(0xFF44A5FF),
fontWeight: FontWeight.w400
),
maxLines: 1,
minFontSize: 8,
),
),
Icon(
Icons.keyboard_arrow_down_sharp,
color: Color(0xFF44A5FF),
),
],
),
),
),
),
I want to set these icons closer to start and end of OutlinedButton and I don't know how to achieve that.
You can provide padding on style, it will reduce some padding
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Color(0xFF44A5FF),
),
padding: EdgeInsets.zero,
),
IconData comes with some default hard-coded value.
You can check this solution also
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF44A5FF),
),
borderRadius: BorderRadius.circular(5)),
width: size.width * 0.4,
child: GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.star_outline, color: Color(0xFF44A5FF)),
Container(
width: (size.width * 0.3) * 0.6,
child: const Text(
"selectedValue",
style: TextStyle(
color: Color(0xFF44A5FF),
fontWeight: FontWeight.w400),
maxLines: 1,
),
),
Icon(
Icons.keyboard_arrow_down_sharp,
color: Color(0xFF44A5FF),
),
],
),
),
),
Download it as PNG image to your folder assets and make it a child.
GestureDetector(
onTap: () {},
child: Image.asset(
"imagePath",
color: Color(0xff60B906),
height: 16,
width: 16,
),
),
Use stack and positioned Widget:
Stack(
alignment: Alignment.center,
children: <Widget>[
IconButton(
onPressed: null,
icon: Icon(
Icons.keyboard_arrow_left,
color: Colors.black),
),
color: Color(0xff60B906),
iconSize: 20,
),
Positioned(
right: 20,
child: IconButton(
onPressed: null,
icon: Icon(
Icons.keyboard_arrow_left,
color: Colors.black,
),
color: Color.red,
iconSize: 20,
),
),
],
)
How can I design this kind of button in flutter?
You can use elevated button with transparent color and white border and shadow
Try below code hope its help to you.
Container(
padding: EdgeInsets.all(10),
height: 80,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(80),
),
child: InkWell(
onTap: () {
//Write your onPressed function here
print('Button Pressed');
},
child: Card(
color: Colors.teal[100],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(70),
),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
),
Your result screen->
Here you go, adjust to your needs:
Container(
color: Color.fromRGBO(133,208,212,1),
padding: const EdgeInsets.all(15),
child: Container(
padding: EdgeInsets.all(8),
decoration: ShapeDecoration(
shape: StadiumBorder(),
color: Color.fromRGBO(133,208,212,1),
shadows: <BoxShadow>[
BoxShadow(
color: Colors.white,
spreadRadius: 8,
blurRadius: 3,
offset: Offset(0, 0),
),
BoxShadow(
color: Colors.grey.shade300,
spreadRadius: 3,
blurRadius: 3,
offset: Offset(5, 2),
),
],
),
child: Text(
'Sign in',
style: TextStyle(color: Colors.white),
),
),
),
The first Container is there just to highlight it's child, so it's not important
In AppBar I have kept an icon. When I click on that icon it should open a popup with pointing arrow. That popup should display below the icon only. Should not overlap on that image. And that dropdown should able to customise according to any UI. Please find the attached image.
I don't want to use any plugin.
You can use the Stack Widget to overlap this bubble, and change dynamically the visibility.
//if the bubble is visible or not
bool isVisible = false;
#override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: [
Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey[50],
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: IconButton(
icon: Icon(
Icons.add_alert_rounded,
color: Colors.black,
),
onPressed: () {
setState(() {
isVisible = !isVisible;
});
},
),
),
],
),
body: Container(),
),
Positioned(
top: 72, //considering the app bar and system status bar height
right: 10,
child: Visibility(
visible: isVisible,
child: Stack(
children: [
Positioned( //the diamond behind the content
top: 0,
right: 20,
child: Transform.rotate(
angle: math.pi / 4, //rotating the container to turn it into a diamond
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 5.0,
)
],
),
),
),
),
Container(
height: 40.0,
width: 200,
margin: const EdgeInsets.only(top: 5.0),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
offset: Offset(0, 4.0),
),
],
borderRadius: BorderRadius.circular(5.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//just to represent the content of the bubble
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'number',
style: TextStyle(color: Colors.white),
),
),
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'5000',
style: TextStyle(color: Colors.white),
),
),
],
),
),
],
),
),
),
],
),
);
}
I have a simple icon button as presented below, for somereason the clickable area do not align with the icon, no matter what I do. tried to run the app on Linux, Web and Android.. all with the same issue.
home: Scaffold(
body: Column(children: [
IconButton(
onPressed: () => {},
icon: Icon(
Icons.highlight_off,
size: 70,
color: Colors.red,
),
),
])));
A simplified version of what my code looks like:
MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
alignment: AlignmentDirectional.center,
overflow: Overflow.visible,
children: [
Container(
width: 500,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
]),
),
Positioned(
top: -40,
right: 5,
child: IconButton(
onPressed: () => {},
icon: Icon(
Icons.highlight_off,
size: 70,
color: Colors.red,
),
),
),
]),
)));
Here you go.
The reason this was happening, your iconSize is very big. So, according to this you need to make sure your button itself adjust its size. For that you can use BoxConstraints to provide it minHeight.
import 'package:flutter/material.dart';
void main() async {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
alignment: AlignmentDirectional.center,
overflow: Overflow.visible,
children: [
Container(
width: 500,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
]),
),
Positioned(
top: -40,
right: 5,
child: IconButton(
constraints: BoxConstraints(
minHeight: 100,
),
onPressed: () => {},
icon: Icon(
Icons.highlight_off,
size: 70,
color: Colors.red,
),
),
),
]),
),
),
),
);
}
After adding elevation to Material widget, I want to keep only the bottom shadow. Don't want the left and right side shadow. How to achieve this?
Here is my code :
// searchbar
child: Material(
color: Colors.transparent,
elevation: 5.0,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
color: AppColors.searchBoxColor,
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
// searchfield
Expanded(
child: Container(
alignment: Alignment.center,
height: AppBar().preferredSize.height,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Hint Text",
),
),
),
),
],
),
),
),
You cannot do that with elevation because that will inevitably cast the shadows as if a piece of paper is elevated in air.
What you can do is to add a custom shadow using a BoxShadow. If you're using a RaisedButton, for example, you can change to use a FlatButton with a Container with a BoxDecoration. Here is an example of that:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: Text('Button With Elevation'),
textColor: Colors.white,
color: Colors.red,
onPressed: () {},
elevation: 12.0,
),
SizedBox(
height: 32.0,
),
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(0.0, 6.0),
color: Colors.grey.withOpacity(0.3),
blurRadius: 5.0,
),
]
),
child: FlatButton(
child: Text('Button With Custom Shadow'),
textColor: Colors.white,
color: Colors.red,
onPressed: () {},
),
),
],
),
),
),
);
}
}
And here is the result:
By specifying the values of your Offset you can change the direction to where the shadow will cast.
UPDATE:
I saw your code later. Here is how you implement BoxShadow with your code:
child: Material(
color: Colors.transparent,
elevation: 0.0,
child: Container(
decoration: BoxDecoration(
color: AppColors.searchBoxColor,
boxShadow: [
BoxShadow(
offset: Offset(0.0, 12.0),
color: Colors.grey.withOpacity(0.3),
blurRadius: 5.0,
),
],
),
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Expanded(
child: Container(
alignment: Alignment.center,
height: AppBar().preferredSize.height,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Hint Text",
),
),
),
),
],
),
),
),
You can customize the shadow using the boxShadow property of the Container, here an example:
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 5),
blurRadius: 5,
color: Colors.grey,
),
],
),
),