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),
)
],
),
),
),
);
}
Related
I'm trying to create two click areas on the same line, but I tried to add a Line to place the second click area but it always gives an error.
What I understand is that the two containers have to be inside a Row. But when I try to do this it goes wrong when the program. The second container I want to have a fixed size and smaller than the first one.
I've attached an image to illustrate what I'm trying to do and my code. Could anyone give me suggestions or material I can read? Thanks.
Widget createScreen() {
late double widthScreen = MediaQuery.of(context).size.width; //to test only
return Container(
padding: const EdgeInsets.all(15.0),
child: Row( //<--- probably wrong
children: <Widget>[
Container(
margin: const EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
// ignore: prefer_const_literals_to_create_immutables
boxShadow: [
const BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: InkWell(
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: <Widget>[
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'test text',
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
)
],
),
),
),
),
),
//probably wrong
Container(
width: widthScreen * .10,
child: Text(
'D',
style: TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
)
],
),
);}
Use Expanded on first Container, it will take available size. Also you can provide fixed and it will get minimum sapele , also setting mainAxisSize: MainAxisSize.min, on 1st container provide the UI, Also you can remove extra rows and column on first container (item1) follow the second container I've created. Also using flex on Expanded inside row is more flexible.
Widget createScreen() {
late double widthScreen = MediaQuery.of(context).size.width; //to test only
return Container(
padding: const EdgeInsets.all(15.0),
// height: 81,
width: widthScreen,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: const EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
]),
child: item1(),
),
),
SizedBox(
width: 16,
),
Container(
width: widthScreen * .14,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
],
),
child: Material(
borderRadius: BorderRadius.circular(10),
// elevation: 11, // if you need extra
child: InkWell(
borderRadius: BorderRadius.circular(10),
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
),
),
)
],
),
);
}
Widget item1() {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: InkWell(
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: <Widget>[
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'test text',
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
)
],
),
),
),
);
}
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.
I have simple screen that contains of 2 widget and I wrap it using Column, but there is always small space between first widget and second widget. Is there a way to remove space in Column. here is the picture that I would like to remove the space:
and here is the code:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: cardWidth,
height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
],
),
),
),
),
),
Container(
width: sizeWidth - 135,
height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: noteAuth,
border: Border.all(
color: noteAuth,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
),
Your parent layout color and container color are both same then you use card and give padding and it takes some space.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
Container(
width: double.infinity - 135,
// height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.green,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
)
Output:
edit the margin of the Card widget
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
margin: EdgeInsets.all(0), //************* Here ********************
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
mainAxisAlignment: MainAxisAlignment.center
I'm building a login page for my APP ( delivery app )
I'm getting "Bottom overflowed by 89 pixels" and I can,t fix it.
I looked everywhere.
the only way I found was to add
resizeToAvoidBottomPadding: false
on the scaffold, but it did not work.
how to fix it?
Do i need to wrap something?
If yes, how to do it ?
And for last, what does "Bottom overflowed by 89 pixels" means?
class LoginPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
//
// Captura o tema do titulo
TextStyle titleTheme = Theme.of(context).textTheme.headline6.copyWith(
color: Layout.light(),
);
return Scaffold(
backgroundColor: Layout.primaryDark(),
body: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 20),
ClipRRect(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Layout.light(),
width: 0,
),
borderRadius: BorderRadius.circular(160),
color: Layout.dark(.8),
),
child: Image.asset('assets/foto_app.png'),
),
borderRadius: BorderRadius.circular(170),
),
SizedBox(height: 20),
Text('Distribuidora Ilha Grande', style: titleTheme),
],
),
),
Stack(
children: <Widget>[
Positioned(
top: 10,
left: 0,
right: 0,
child: Container(
height: 50,
decoration: BoxDecoration(
color: Colors.transparent,
boxShadow: [
BoxShadow(
color: Layout.dark(),
offset: const Offset(0, 0),
spreadRadius: 8,
blurRadius: 15,
),
],
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
color: Layout.light(),
),
height: MediaQuery.of(context).size.height * .5,
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
),
initialValue: 'Email',
),
SizedBox(height: 15),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
),
initialValue: 'Senha',
),
SizedBox(height: 15),
SizedBox(
width: double.infinity,
height: 50,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
onPressed: () {},
child: Text(
'ENTRAR',
style: titleTheme,
),
),
)
],
),
),
)
],
)
],
),
);
}
}
Replace the Top Column with Flex, and then use Expanded.
Flex(
direction:Axis.Vertical,
child: Expanded(...)
)
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,
...
),
...
),
),
),
),