I want to use Inkwell splash for this container.
Without Inkwell widget.
Expanded(
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
But when i add inkwell and material widget it looks like
Expanded(
child: Material(
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
I removed boxshadow from container and added elevation for material and i got like this.
Expanded(
child: Material(
borderRadius: BorderRadius.circular(12.0),
elevation: 2.0,
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
/*boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],*/
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
)
finally it similar to what i need but in top of the container that coming shadow or elevation is not like needed one.
Anyone how to get shadow like first image.
I solved by wrapping Material widget by another Container widget and i give box shadow to this container, and i resolved my problem.
Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Material(
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
),
Try this way using Card
Card(
elevation: 10.0,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: Colors.blue,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
))
OUTPUT
Use Ink instead of Material when using Inkwell, then give the internal Container a color (it's transparent by default, just showing the shadow underneath):
Expanded(
child: Ink(
color: _size.white,
child: InkWell(
...
child: Container(
decoration: BoxDecoration(
color: Color.white,
...
),
...
),
),
),
),
Related
I'm trying to design a student dashboard , and am wondering how to add the blue color at the end of this card widget where the text( student, news ) are inserted
?
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
children: [
Container(
child: Icon(Icons.person, size: 24, color:Colors.blueAccent),
padding: const EdgeInsets.all(12),
),
Container(
decoration: const BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(12), bottomLeft: Radius.circular(12))
),
child: Text("Student"),
padding: const EdgeInsets.all(12),
)
],
),
)
output:
You can do
Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
//custom widgets
Icon(...),
Text(...)
]
)
)
),
Expanded(
child: Container(
decoration: BoxDecoration(color: Colors.blue[900]),
child: Center(
child: Text(...)//custom text and style
)
)
)
]
)
);
Widget getCardItem() {
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
width: 105,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Container(
child: Icon(Icons.supervisor_account,
size: 24, color: Colors.blueAccent),
padding: const EdgeInsets.all(12),
),
Container(
child: Text(
"2100",
style: TextStyle(
color: Colors.blueAccent,
),
),
padding: const EdgeInsets.all(12),
),
],
),
Container(
decoration: const BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(12),
bottomLeft: Radius.circular(12))),
child: Text("Student"),
padding: const EdgeInsets.all(12),
)
],
),
),
),
);
}
I'm trying to create a list of items with shadow, I also used from flutter_slidable and now this slidable covers my item shadow!!
As you can see in
first item is inside a slidable widget and the second item is a normal item!
action pane screenshot
this is item with slidable:
Slidable(
startActionPane: ActionPane(
extentRatio: .40,
motion: const ScrollMotion(),
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
width: 70,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.edit,
size: 20,
color: Theme.of(context).colorScheme.onSurface,
),
Text(
'Delete',
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
),
const SizedBox(width: 6),
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
width: 70,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.delete,
size: 20,
color: Theme.of(context).colorScheme.onSurface,
),
Text(
'Edit',
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
),
],
),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
padding: const EdgeInsets.all(4),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.onSurface),
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(16)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/avatar/3.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Abc Def',
style: Theme.of(context).textTheme.headline6,
),
],
),
),
],
)
),
Row(
children: [
Text(
'a',
style: TextStyle(
fontFamily: 'faMed',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.secondary,
),
),
Icon(
Icons.arrow_drop_down,
color: Theme.of(context).colorScheme.secondary,
size: 30,
),
],
),
],
),
),
),
),
and this is a normal item:
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
padding: const EdgeInsets.all(4),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.onSurface),
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(16)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/avatar/3.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Abc Def',
style: Theme.of(context).textTheme.headline6,
),
],
),
),
],
)
),
Row(
children: [
Text(
'a',
style: TextStyle(
fontFamily: 'faMed',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.secondary,
),
),
Icon(
Icons.arrow_drop_down,
color: Theme.of(context).colorScheme.secondary,
size: 30,
),
],
),
],
),
),
),
I tried to use a dismissible widget instead of slidable but that's not what I want!
A quick solution is using ClipRRect as Slidable's child. ActionPane is not getting enough space for its children, extend extentRatio:'s value. You can also remove this, it will paint the UI based on its need.
Slidable(
startActionPane: ActionPane(
extentRatio: .50,
//...
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: InkWell(
this problem was solved in the new release, you can see this issue.
How can I create button like below,
Try below code hope its helpful to you. used Stack widget here for that
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 2,
height: 2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
),
],
),
),
),
),
Container(
width: 100,
height: 40,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
child: Center(
child: Text(
'Profile',
style:TextStyle(color: Colors.white,),
textAlign: TextAlign.center,
),
),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Colors.blue,
),
),
),
)
],
),
Your Result screen->
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: TextButton(
child: Text(
"Profile",
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
you can use following code sample...change height according to your need...or use mediaquery for better result:
Container(
height: 275,
child: Stack(
children: [
Container(//container with background color
height: 250,
child: //other widgets
),
Positioned(
bottom: 0,
child: //button here
),
],
),
),
I'm trying to make a widget to display posts by users on a social media platform, I have certain elements I want to include in the post, one of them being the external links he might have attached while creating the posts.
I want these links to be represented by rounded buttons(which I've managed to achieve through the use of ClipOval) and I want these ovals to be in a row spaced evenly from the center.
So far, the only way I've been able to space them out is by adding SizedBox(s) of a certain width. But this is not efficient for different posts may differ in the number of links and thus the number of Ovals. This would look messy then.
I have overlaid the row on top of the post's image(to which I've applied a linear gradient to make the buttons visible) using a stack.
Here's my code
class postTemplate extends StatelessWidget {
List <String> tags = ['tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8'];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(height: 150,),
Container(
height: 450,
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 20,),
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32)
),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ListTile(
title: Padding(
padding: const EdgeInsets.only(left : 70.0),
child: Text("Username"),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 10.0,left: 80.0),
child: Text("Hello"),
),
),
Stack(
children: [
Container(
child: Container(
foregroundDecoration:BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.transparent],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0, 0.3],
),),
child: Image(image: AssetImage('assets/images/modelPostImage.png'),fit: BoxFit.contain,)),
),
Positioned(
bottom: 10.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 15,),
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
],
),
Container(
height: 44,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(22))
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tags.length,
itemBuilder: (BuildContext context, int index){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
border: Border.all(color: Colors.black)
),
margin: EdgeInsets.only(right: 13, left: 13),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 5.0, right: 20, left:20
),
child: Text(tags[index],
style: TextStyle(
color: Colors.black
),),
),
);
},
),
),
],
),
)
],
),
CircleAvatar(
radius: 42,
backgroundImage: AssetImage('assets/Icons/profileLogo.jpg')
)
],
),
),
],
),
);
}
}
Any help would be appreciated.
Wrap with a container and give it full width and remove sizing
Positioned(
bottom: 10.0,
child: Container(
width:MediaQuery.of(context).size.width,
child :Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
),
],
),
There is a specialized widget to create even space instead of using SizedBox. Replace SizedBox with Spacer.
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,
),
],
),
),