Related
Hello when ever I tried to call the bottombar widget (the custom widget that I created) The other widget elements dissapears
here is the home_page.dart code:
import 'package:clothing_app/utils/bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:line_awesome_icons/line_awesome_icons.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int buttonSelected = 1;
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
bottomNavigationBar: BottomBar(),
appBar: AppBar(
elevation: 0,
backgroundColor: SCAFFOLD_BG_COLOR,
leading: IconButton(
onPressed: () {},
icon: Icon(
LineAwesomeIcons.bars,
color: MAIN_BLACK_COLOR,
),
),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
LineAwesomeIcons.search,
color: MAIN_BLACK_COLOR,
),
),
],
),
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(
vertical: 12, horizontal: 16),
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
_topSlideItem(),
SizedBox(
width: 24,
),
_topSlideItem(),
SizedBox(
width: 24,
),
_topSlideItem(),
SizedBox(
width: 24,
),
_topSlideItem(),
SizedBox(
width: 24,
),
_topSlideItem(),
SizedBox(
width: 24,
),
_topSlideItem(),
],
),
),
),
],
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 12, horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Best of the week',
style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(
height: 24,
),
verticalSlideItem(),
SizedBox(height: 16),
verticalSlideItem(),
SizedBox(height: 16),
verticalSlideItem(),
SizedBox(height: 16),
verticalSlideItem(),
SizedBox(height: 16),
verticalSlideItem(),
SizedBox(height: 16),
verticalSlideItem(),
],
),
)
],
),
),
),
],
),
),
);
}
Widget _topSlideItem() {
return Material(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 32),
width: MediaQuery.of(context).size.width * .55,
child: Row(
children: <Widget>[
Image.asset(
'assets/img.jpeg',
height: 140,
width: 50,
fit: BoxFit.fitHeight,
),
SizedBox(width: 24),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Flower patterned khaki dress',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 12,
),
Row(
children: <Widget>[
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
),
SizedBox(
width: 8,
),
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(4),
),
),
SizedBox(
width: 8,
),
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(4),
),
)
],
),
SizedBox(
height: 12,
),
Text(
'\$89,99',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(180, 184, 190, 1),
),
),
],
),
)
],
),
),
);
}
Widget verticalSlideItem() {
return Material(
borderRadius: BorderRadius.circular(32),
color: Colors.transparent,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(24)),
child: Center(
child: Image.asset(
'assets/img.jpeg',
height: 110,
width: 80,
fit: BoxFit.fitHeight,
),
),
),
SizedBox(width: 24),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Flower patterned\nkhaki dress',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 12,
),
Row(
children: <Widget>[
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
),
SizedBox(
width: 8,
),
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(4),
),
),
SizedBox(
width: 8,
),
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(4),
),
)
],
),
SizedBox(
height: 12,
),
Text(
'\$89,99',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(180, 184, 190, 1),
),
),
],
),
)
],
),
),
);
}
}
here is the custom widget I created (bottom_bar.dart);
#override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
),
),
);
}
}
here is the main.dart file;
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(fontFamily: 'Cera'),
home: HomePage(),
);
}
}
here is the image when I call the bottom navigationbar;
and here is an image when I remove the bottom navigationbar code line (bottomNavigationBar: BottomBar(),);
You are wrapping your custom BottomNavigationBar with Scaffold and it covers you HomePage Scaffold, so that's why the other widgets couldn't be shown.
Remove the Scaffold from the custom BottomNavigationBar:
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
);
}
I have used the bottomsheet at one of my flutter project. It works perfectly on android and IOS simulator. When I run the project on real iPhone I am facing issues. please check attached code and image.
_changePasswordBottomSheet() {
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
context: context,
builder: (builder) {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15),
height: 400,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: Column(
children: [
Padding(
padding: EdgeInsets.all(12.w),
child: InkWell(
onTap: () {
NavigationService().setPopNavigator();
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
setWidth(25),
setComonText(
'CHANGE PASSWORD',
setAlignment: TextAlign.center,
style: CustomTheme().setTextStyle(
fontsize: 18.w,
weight: weight.semibold,
color: C.blackTxt),
),
Container(
height: 25.w,
width: 25.w,
decoration: BoxDecoration(
color: C.primaryGreyColor,
borderRadius: BorderRadius.circular(12.5.w),
),
child: Icon(
Icons.close,
color: C.white,
size: 16.w,
)),
],
),
),
),
setHight(25.w),
Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
border: Border.all(color: C.boxBorderColor),
borderRadius: BorderRadius.circular(5)),
child: TextFormField(
controller: editController.signupPassword,
obscureText: true,
decoration: InputDecoration(
hintText: "Passsword",
border: InputBorder.none,
hintStyle: CustomTheme().setTextStyle(
fontsize: 16.w,
weight: weight.semibold,
color: C.boxBorderColor)),
style: CustomTheme().setTextStyle(
fontsize: 16.w, weight: weight.semibold),
),
),
setHight(35.w),
Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
border: Border.all(color: C.boxBorderColor),
borderRadius: BorderRadius.circular(5)),
child: TextFormField(
controller: editController.signupNewPass,
obscureText: true,
decoration: InputDecoration(
hintText: "New Passsword",
border: InputBorder.none,
hintStyle: CustomTheme().setTextStyle(
fontsize: 16.w,
weight: weight.semibold,
color: C.boxBorderColor)),
style: CustomTheme().setTextStyle(
fontsize: 16.w, weight: weight.semibold),
),
),
setHight(10.w),
Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
border: Border.all(color: C.boxBorderColor),
borderRadius: BorderRadius.circular(5)),
child: TextFormField(
controller: editController.signupConfirmPass,
obscureText: true,
decoration: InputDecoration(
hintText: "Confirm Passsword",
border: InputBorder.none,
hintStyle: CustomTheme().setTextStyle(
fontsize: 16.w,
weight: weight.semibold,
color: C.boxBorderColor)),
style: CustomTheme().setTextStyle(
fontsize: 16.w, weight: weight.semibold),
),
),
setHight(50.w),
Row(
children: [
setWidth(20.w),
Expanded(
child: createButton(
width: setDeviceWidth() - 40.w,
text: 'CANCEL',
txtColor: C.white,
btnColour: C.primaryGreyColor,
onBtnClick: () {
editController.cancelPassword();
NavigationService().setPopNavigator();
},
fontSize: 14.w,
height: 45.w,
borderRadius: BorderRadius.circular(22.5.w)),
),
setWidth(20.w),
Expanded(
child: createButton(
width: setDeviceWidth() - 40.w,
text: 'SAVE',
txtColor: C.white,
onBtnClick: () {
editController.cancelPassword();
NavigationService().setPopNavigator();
modalBottomSheetSuccess(
'Password Saved \nSuccessfully!');
TimerUtils().startTimer(() {
NavigationService().setPopNavigator();
});
},
fontSize: 14.w,
height: 45.w,
borderRadius: BorderRadius.circular(22.5.w)),
),
setWidth(20.w),
],
)
],
)),
),
);
});
}
Attached Image is:
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
As #Zahra wrote,
adding clipBehavior: Clip.none, to the ListView, solved the problem.
The crop happens only when your widgets exceed the screen size
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
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 want to add expandable menu to drawer items of flutter. How can I achieve this functionality in flutter. Please just point me in the correct direction if there is any example or blog.
You have to pass the drawers child property a ListView, and in that ListView you can then use an ExpansionTile. That would look something like this:
Drawer(
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("Expansion Title"),
children: <Widget>[Text("children 1"), Text("children 2")],
)
],
),
);
You have to pass the drawers child property a ListView, and in that ListView you can then use an ExpansionTile. That would look something like this:
ExpansionTile(
title: Text('Categories'),
leading: Icon(Icons.view_list),
children: <Widget>[
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Shalwar kameez"))))),
onTap: (){},
),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Sherwani."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Sindhi Ajrak or Cap."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width:250,
height: 40,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Punjabi kurta and tehmat."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Saraiki Turban"))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Saraiki Kurta."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Peshawari Turban."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Lehenga Choli"))))),
onTap: (){},),
],
My solution:
ExpansionTile(
leading: Icon(
Icons.settings,
color: headingcolor,
),
trailing: Icon(
Icons.arrow_forward_ios_rounded,
size: 10.0,
color: defaultcolor,
),
title: Text(
"Settings",
style: TextStyle(
color: headingcolor,
),
),
children: <Widget>[
DrawerListTile(
title: "Terms",
svgSrc: Icon(
Icons.rule_sharp,
color: headingcolor,
),
press: () {
Get.offAll(
() => SettingsScreenMainTerms(),
duration: Duration(milliseconds: 400), //
transition: Transition.zoom,
);
},
),
DrawerListTile(
title: "Notifications",
svgSrc: Icon(
Icons.edit_notifications_rounded,
color: headingcolor,
),
press: () {
Get.offAll(
() => SettingsScreenMainNotifications(),
duration: Duration(milliseconds: 400), //
transition: Transition.zoom,
);
},
),
],
),