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.
Related
can someone Please help me clone this ui I got it from Dribble and Im facing the problem with the box radius.
I tried using a stack but it doesnt show the container radius maybe i need to use a custom widget.
Please any help is needed i am stuck on this problem.
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title:Text(DateTimeFormat.format(DateTime.now(),format: 'D M, Y')
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26
),),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {
},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(Icons.maximize_outlined,size: 70,color: Colors.white60,),
)
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15
)
]
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text("History of Tips",style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black
),),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150,),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black,),
Text("Status")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);
I added in some box shadow and some different colors but still it's not quite right.
You need to add the appbar inside your body like this:
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)
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 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 am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
Only I could able to get Image below.
I have implemented my code as follows:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);
Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear, color: Colors.blueGrey,size: 16,),
)),
],
),
),
);
In my flutter app I have a GridView in which I list cards. In the cards I want to have an image and some text. I am trying to do this as follows:
import 'package:flutter/material.dart';
class Home extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.green,
Colors.teal,
]
)
),
),
Padding(
padding: const EdgeInsets.only(top: 65),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white60, width: 2.0)
),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.restaurant, size: 120,),
),
),
]
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white
),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
style: TextStyle(
fontSize: 16,
color: Colors.white70
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 350),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)
),
),
Container(
margin: EdgeInsets.only(top: 250),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30)
)
),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: <Widget>[
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
],
)
),
),
],
),
),
),
);
}
}
And this renders the list of cards fine. My problem is that the cards bottom is being overflowed. I wrap the card in a container to fix this which looks like the follows:
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Some text here",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
I don't understand why this is happening. Any help would be appreciated. Thanks.
ok... I usual don't do that but I had to rework the whole structure because most of the things didn't make any sense. Now I don't really understand.. Why do you want cards to increase size to not overflow.. Did you mean decrease size? The cards in your grid view will be always the same because you use grid view. You have set crossAxisCount to 2 so 2 items in x axis and square.. If you add more, then on smaller screen they will be accessible by scrolling and will not overflow. I have set position of the container where you have all your cards from the top to 1/3 of the screen height which perhaps is better then hardcoding it to fixed size as you had. Try it and let me know if you need to adjust it in any other way.
UPDATE
Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: FractionallySizedBox(
heightFactor: 0.5,
child: Container(
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.white60, width: 2.0)),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.restaurant,
),
),
),
),
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
),
Flexible(
flex: 3,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
)),
),
),
),
]),
);