How to set text widget under sized box in a container flutter - flutter

In flutter how to set a text widget under a sized box in a container as below? I tried but didn't get what I wanted. Thanks in advance!
[1]: https://i.stack.imgur.com/fLRje.jpg,
[2]: https://i.stack.imgur.com/dfMa8.jpg
[What I want][1]
[What I get][2]
Row(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 70.0,
height: 70.0,
child: Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
)),
Padding(
padding: const EdgeInsets.only(left: 30, top: 30),
child: Row(
children: [
const Text('Language',
style: TextStyle(
fontSize: 17,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
],
),
),
),
],
),


To add multiple widget vertically you have to use Column. Row is used to multiple widget in one line (Horizontally). 1. Remove unnecessary use of Row from your code. Use padding, margin or alignment parameters to give proper spacing or alignment. Here is updated code:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 120.0,
height: 120.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
Padding(
padding: const EdgeInsets.only(top: 30),
child: const Text('Language',
style: TextStyle(
fontSize: 14,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
),
],
)),
),

Related

Flutter Expansion tile

enter image description hereI have a nested list as a expantiontile for example :
if I have a list of years each one includes a list of months and into each one there is a list of days
I want when I press on the day number in the list give me a year, the month, and the day I had to choose.
Example:
If I choose the year 2019 the month Feb then day 5 I need when I press on the day or in the expansion tile it well gives my 5 Feb 2019
.
I tried many ways but all time it gave me just the number of the day without the month and year
In the photo u can see wood ward
Into it there many choices : gate 1 , gate 2 and wood ward st
In gate 1 we had many choices such as tower crane or forkleft etc...
I want when i press on a service like tower crane 1
Return all info : woodward , gate 1 , tower crane 1 .
Now it return just tower crane 1
Than you.

//You can try this code hope this will work for you, Thanks
import 'package:flutter/material.dart';
class DocumentTile extends StatelessWidget {
const DocumentTile({Key ?key,}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Card(
margin: const EdgeInsets.only(top: 12, right: 30),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
color: Colors.blue[800],
clipBehavior: Clip.antiAlias,
child: Container(
width: MediaQuery.of(context).size.width * 0.83,
decoration: BoxDecoration(
border: Border.all(color: Colors.pink,width: 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: ExpansionTile(
tilePadding: const EdgeInsets.only(left: 40.0, right: 30.0),
backgroundColor: Colors.blue[800],
trailing: Container(
width: MediaQuery.of(context).size.width * 0.49,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 0.5,
height: 50,
color: Colors.white,
margin: const EdgeInsets.only(right: 16.0),
),
const Text(
"NUMBER -1",
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
const Text(
" TITLE",
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
/* Row(
children: [
Container(
margin: const EdgeInsets.only(right: 6),
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
child: Center(
child: Text(
"guyguy",
),
)),
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
child: IconButton(
icon: Icon(Icons.add, color: Colors.white),
iconSize: 25,
padding: const EdgeInsets.all(5.5),
onPressed: () {},
)),
],
),
Row(
children: [
Container(
margin: const EdgeInsets.only(right: 6),
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
child: IconButton(
icon: Icon(Icons.more_vert, color: Colors.white),
iconSize: 25,
padding: const EdgeInsets.all(5.5),
onPressed: () {},
)),
Container(
margin: const EdgeInsets.only(right: 6),
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(4),
),
child: IconButton(
icon: Icon(Icons.share_outlined, color: Colors.white),
iconSize: 20,
padding: const EdgeInsets.all(5.5),
onPressed: () {},
)),
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(4),
),
child: IconButton(
icon: Icon(Icons.arrow_forward, color: Colors.white),
iconSize: 25,
padding: const EdgeInsets.all(5.5),
onPressed: () {
},
)),
],
),*/
],
),
),
title: const Text(
"No",
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
children: [
Container(
width: double.maxFinite,
padding: const EdgeInsets.only(
left: 40.0, right: 30.0, top: 20, bottom: 20),
color: Colors.blue[800],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Subtitle",
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w300),
),
SizedBox(height: 10,),
Text(
"Subtitle2",
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w300),
),
SizedBox(height: 10,),
Text(
"Subtitle3",
style: TextStyle(
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.w300),
),
SizedBox(height: 10,),
Text(
"Subtitle4",
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w300),
),
],
),
)
],
),
),
),
),
);
}
}

Flutter Card and Container design

I wanted to achieve this:
But I end up getting this (ignore the color):
How can I shape the border of the colored border side, I keep getting this weird error (or at least I have never encounter one), I shape the topLeft and bottomLeft border and it pops up A borderRadius can only be given for a uniform Border. What am I doing wrong here? I have placed a Container inside a Card widget, I tried the other way around, but not the results I expected. I now have what I need, I just need to round the topLeft and bottomLeft corner of the Container (Or maybe something else) to achieve the goal from the first picture with the blue colour.
Here is the code:
Container(
height: 98.0,
width: double.infinity,
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
),
shadowColor: Color.fromRGBO(0, 0, 0, 0.6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), //this is causing the error, when I remove it, I get the card like on picture 2 with the red line
border: Border(
left: BorderSide(
color: Colors.red,
width: 3.0,
style: BorderStyle.solid),
),
),
child: Row(
// some content here
],
),
),
),
),
Thanks in advance for the help!

please try with this
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.green,
elevation: 16,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Wrap(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
margin: EdgeInsets.only(left: 10),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Dr. Alok Verma",
style: TextStyle(fontSize: 24),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text("Date: 14-06-2021",
style: TextStyle(fontSize: 24))),
Expanded(
child: FlatButton(
onPressed: () {},
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(5)),
padding: EdgeInsets.all(8),
child: Text("Completed",
style: TextStyle(fontSize: 24)))))
],
),
Text("Time: 10:20", style: TextStyle(fontSize: 24)),
SizedBox(
height: 20,
),
Text("Aastha Hospital",
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
Text("Some address", style: TextStyle(fontSize: 18)),
],
),
)
],
),
),
)
image:

Dynamically expand a component and compress another component in flutter

I have the following code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
height: 32.0,
padding: EdgeInsets.symmetric(
horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'Save 20%',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.poppins(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
],
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
print('Add to cart');
if (FirebaseAuth.instance.currentUser == null) {
Navigator.pushNamed(context, '/sign_in');
return;
}
cartBloc.add(
AddToCartEvent(product.id, currentUser.uid));
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
FontAwesomeIcons.cartPlus,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
),
which results in the following view
I want to have the following criteria
When I click the cart icon for the first time
1. add to cart button should expand if quantity > 0
2. "You save 20%" component should compress to square box "20%"
Something like this
I would highly appreciate any kind of feedback, comments, hints, solution pointers. Thx

I think in your case you can use an AnimatedContainer class.
pseudocode
var isClickedOnCart;
AnimatedContainer(
....
width: isClickedOnCart? 100 : 20;
...
/// YOUR CODE HERE///
)
/// ONPRESSED CART CARD
onPressed(){
if(quantity > 0){
setState(){
isClickedOnCart = !isClickedOnCart;
}
}
}

You can use this. Remember that, I have used only setState.
String text = 'Save 20%';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32.0,
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Center(
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
//here I use setState for sate management
//TODO: implement your logic to change the text
setState(() {
text = text == 'Save 20%' ? '20%' : 'Save 20%';
});
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
Icons.shopping_cart,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
));
}

Why imported widget is not showing in main screen flutter

I have one main screen and I want to import another widget which contains 3 buttons. However, the widget is not showing in the main screen.
Code from main file:
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: <Widget>[
Text('Your',
style: TextStyle(color: Colors.white, fontSize: 25.0)),
SizedBox(
width: 10.0,
),
Text('Invoice',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0))
],
)),
SizedBox(height: 40.0),
Container(
height: MediaQuery.of(context).size.height - 185.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(75.0))),
child: ListView(
primary: false,
padding: EdgeInsets.only(left: 25.0, right: 20.0),
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 45.0),
child: Container(
height: MediaQuery.of(context).size.height - 300.0,
child: ListView(
children: [
buildInvoice(
'Rent one month', 'July rent', '800€')
],
)))
])),
Expanded(
child: ButtonsDetailInvoice(),
),
],
),
);
}
Code from the buttons widget:
return Container(
height: 450.0,
// margin: const EdgeInsets.all(20.0),
child: Row(
children: [
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorBlau)),
onPressed: () {},
color: colorBlau,
textColor: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.file_download),
Text('Download', style: TextStyle(fontSize: 15.0))
],
),
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorMint)),
onPressed: () {},
color: colorMint,
textColor: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.share),
Text('Share', style: TextStyle(fontSize: 15.0))
],
),
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorRed)),
onPressed: () {},
color: colorRed,
textColor: Colors.white,
child: Text('Report a Problem', style: TextStyle(fontSize: 15.0)),
),
],
),
);
}
}
I would like to see the buttons on the bottom of the main file. I imported them but they are not showing. If someone can help see the error I would really appreciate it.

Use Stack widget in main file.

Card size not being adjusted when wrapped in a container

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),
),
],
),
),
),
],
)),
),
),
),
]),
);