I want to preface that I'm very new and this is my first app.
I'm trying to add a width and a height to my app I was told that this would do the trick but now my entire app is not on screen. Here was my original code. the original code is great but I can't add constraints like a max width or a max height.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
scrollDirection: Axis.vertical,
controller: ctrl,
children: [
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
])),
);
}
}
Here is what i changed it to and what caused the app to disappear.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
scrollDirection: Axis.vertical,
children: [
Container(
width: MediaQuery.of(context).size.width * .80,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
])
), ); } }
So basically every time I add this line
width: MediaQuery.of(context).size.width * .80,
The app disappears and I'm not sure why. Could anybody help?
Thank you!
You can wrap the PageView in a Builder:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) => PageView(
scrollDirection: Axis.vertical,
children: [
Container(
width: MediaQuery.of(context).size.width * .80,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
],
),
),
),
);
}
}
This should fix it. The problem is that the context that you are using is not a child of MaterialApp.
Related
enter image description here
I need to achieve this programmatically in flutter for all tabs and mobile screens.
Try with following basic code, you can customise as your requirement
Stack(
children: [
Container(
height: 32,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
Text('Your Text Here'),
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
],
)
],
)
try this.
Transform.scale(
scale: .5,
child: const SizedBox(
width: 100,
height: 100,
child: FlutterLogo(),
),
),
U gotta do it manually by fixing the Height. i did one for u.
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 60,
width: double.infinity,
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: 40,
right: 40,
child: Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
border: Border.all(color: Colors.cyan, width: 2),
),
child: const Center(child: Text('Hello man')),
),
),
Positioned(
top: 0,
left: 0,
bottom: 0,
width: 80,
child: _icon(Icons.arrow_back_ios_new),
),
Positioned(
top: 0,
right: 0,
width: 80,
bottom: 0,
child: _icon(Icons.arrow_forward_ios),
),
],
),
),
),
);
}
Widget _icon(IconData icon) => Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(color: Colors.cyan, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey[200]!,
spreadRadius: 1,
blurRadius: 20,
),
BoxShadow(
color: Colors.grey[300]!,
spreadRadius: 1,
blurRadius: 20,
)
],
),
child: Icon(
icon,
color: Colors.cyan,
),
);
}
So here is the output image which I wanted to achieve.
and this is the result that I have achieved.
So you can see the shadow effect is in the left and slowly fading towards right.
here is my code for this
Container(
width: MediaQuery.of(context).size.width * 0.45,
height: MediaQuery.of(context).size.height * 0.15,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20)
),
child: Card(
elevation: 5,
),
),
So elevation provides me with shadow but only towards bottom but I want it to be on the left to right fading... any way to achieve this?
Thanks.
Try the following code:
Container(
width: MediaQuery.of(context).size.width * 0.45,
height: MediaQuery.of(context).size.height * 0.15,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(-7.5, 7.5),
),
],
),
child: Card(),
),
Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.zero,
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.15,
decoration: BoxDecoration(
color: Colors.blueAccent,
boxShadow: [
BoxShadow(blurRadius: 8.0),
BoxShadow(color: Colors.white, offset: Offset(0, -16)),
BoxShadow(color: Colors.white, offset: Offset(0, 16)),
BoxShadow(color: Colors.white, offset: Offset(-16, -16)),
BoxShadow(color: Colors.white, offset: Offset(-16, 16)),
],
),
child: Card(color: Colors.white,elevation: 0),
),
You can customize it according to your own code
You can Simply Do This In Card Using RoundedRectangleBorder
Card(
elevation:12.0,
color: Colors.grey[900],
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
),
),
margin: EdgeInsets.all(20.0),
child: Container(
child: Column(
children: <Widget>[
ListTile(
title: Text(
'example',
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
],
),
),
),
You can set the shadow of the container box with this one.
Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.zero,
width: MediaQuery.of(context).size.width * 0.45,
height: MediaQuery.of(context).size.height * 0.15,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
spreadRadius: 5,
blurRadius: 6,
offset: const Offset(-6.0, 6.00),
),
],
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
child: Card(color: Colors.white,elevation: 0),
),
I'm trying to make glow around items in list. For this I use box-shadow in item's decoration. But it is appeared above other items, not as background. How to draw boxshadow behind sibling items as well.
class ShadowItem extends StatelessWidget {
const ShadowItem({required this.isWithGlow});
final bool isWithGlow;
#override
Widget build(BuildContext context) {
return Container(
height: 100,
decoration: BoxDecoration(
boxShadow: (isWithGlow)
? [
BoxShadow(
color: Colors.blue,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
]
: [],
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
);
}
}
you need to set margins between boxes so the shadow will not overflow on another widget.
I am using flutter_neumorphic: ^3.0.3 Package to solve your problem.
here is the code
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
class ShadowItem extends StatelessWidget {
const ShadowItem({required this.isWithGlow});
final bool isWithGlow;
#override
Widget build(BuildContext context) {
return Container(
height: 100,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: Neumorphic(
style: isWithGlow
? NeumorphicStyle(
shadowDarkColor: Colors.blue,
shadowLightColor: Colors.blue,
depth: 10,
shape: NeumorphicShape.convex,
lightSource: LightSource.right)
: NeumorphicStyle(
depth: 2,
shape: NeumorphicShape.convex,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
),
);
}
}
Your need is to show BoxShadow depends on the isWithGlow. so you can set grey shadow background instead of empty shadow [] and set margin for container, it will highlight your Container.
return Container(
height: 100,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
boxShadow: (isWithGlow)
? [
BoxShadow(
color: Colors.blue,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
]
: [
BoxShadow(
color: Colors.grey[400]!,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
],
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
);
I can't seem to figure out why my container keeps being full screen. I'm trying to make the containers have a max width so when its viewed on a desktop the containers look like cards kinda like they would if it was viewed on a phone screen.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) => PageView(
scrollDirection: Axis.vertical,
controller: ctrl,
children: [
Container(
width: MediaQuery.of(context).size.width * .80,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
],
),
),
),
);
}
}
Here is an image of what the container is doing.
Problem
And here is what I want it to look like when viewed on a desktop
What I'm Trying To Do
I Also tried adding constants like this and that didn't work either.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) => PageView(
scrollDirection: Axis.vertical,
controller: ctrl,
children: [
Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height /4,
maxWidth: MediaQuery.of(context).size.width * 0.8,),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
],
),
),
),
);
}
}
Could someone help me do this?
Thank you!
Put PageView Inside a container and give constraints to that container.
I'm using the following code in Flutter, hoping to get a ripple effect (InkWell()) in the green and red areas. Yes they are supposed to be buttons, used in car by a copilot while driving on dirt roads.
I can get the ripple effect behind the colored areas by using the Material Class, but not in front of it and it will not respect the bounderies set by the margins of the containers.
Not using types right now, still in early dev stages, any tips on better or shorter code are very welcome
Does anyone have an idea?
context: context,
// barrierColor: Color(0x55888899),
builder: (BuildContext context) {
return Container(
height: 300,
padding: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Color(0xcc232930),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Stack(
children: [
//Background
Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: new Offset(0.0, 3.0),
blurRadius: 10,
)
],
borderRadius: BorderRadius.circular(40),
),
margin: EdgeInsets.only(left: 15.0, right: 15.0),
padding: EdgeInsets.symmetric(vertical: 18),
height: 245),
Container(
//horizontal line
height: 1,
width: MediaQuery.of(context).size.width / 2 - 15,
color: Colors.white,
margin: EdgeInsets.only(
top: 122, left: MediaQuery.of(context).size.width / 2),
),
Container(
//vertical line
height: 245,
width: 1,
color: Colors.white,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2),
),
// Big F
Container(
width: (MediaQuery.of(context).size.width / 2) - 15,
margin: EdgeInsets.only(left: 15),
alignment: Alignment(0.0, 0.0),
child: Text(
"F",
style: TextStyle(
color: Colors.white,
fontSize: 180,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
),
),
),
// Accept button
Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2 + 1,
//top: 100,
),
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius.only(topRight: Radius.circular(40)),
),
child: InkWell(
onTap: () {
print("Accepted, adding to ControlCard");
},
splashColor: Colors.lightGreen,
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Text("Accept",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
// Decline button
Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2 + 1,
top: 123,
),
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(40)),
),
child: InkWell(
onTap: () {
print("Declined");
},
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Text("Decline",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
],
),
);
},
);```
You should use the Positioned widget to position the Containers within the Stack. ClipRRect is required to stop the splash from going out of boundaries.
Please see working code below or check it out on Dartpad https://dartpad.dev/d1b2350a64826357a5d417b0f1703334 :
import 'package:flutter/material.dart';
final Color darkBlue = Colors.white;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 300,
padding: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Color(0xcc232930),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Stack(
children: [
//Background
Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 3.0),
blurRadius: 10,
)
],
borderRadius: BorderRadius.circular(40),
),
margin: EdgeInsets.only(left: 15.0, right: 15.0),
padding: EdgeInsets.symmetric(vertical: 18),
height: 245),
Container(
//horizontal line
height: 1,
width: MediaQuery.of(context).size.width / 2 - 15,
color: Colors.white,
margin: EdgeInsets.only(
top: 122, left: MediaQuery.of(context).size.width / 2),
),
Container(
//vertical line
height: 245,
width: 1,
color: Colors.white,
margin:
EdgeInsets.only(left: MediaQuery.of(context).size.width / 2),
),
// Big F
Container(
width: (MediaQuery.of(context).size.width / 2) - 15,
margin: EdgeInsets.only(left: 15),
alignment: Alignment(0.0, 0.0),
child: Text(
"F",
style: TextStyle(
color: Colors.white,
fontSize: 180,
shadows: [
Shadow(
blurRadius: 15, color: Colors.black, offset: Offset(0, 0))
],
),
),
),
// Accept button
Positioned(
left: MediaQuery.of(context).size.width / 2 + 1,
child: ClipRRect(
borderRadius: BorderRadius.only(topRight: Radius.circular(40)),
child: Material(
color: Colors.green,
child: InkWell(
onTap: () {
print("Accepted, adding to ControlCard");
},
splashColor: Colors.lightGreen,
enableFeedback: true,
child: Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
child: Center(
child: Text(
"Accept",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
),
),
),
),
),
),
),
),
// Decline button
Positioned(
left: MediaQuery.of(context).size.width / 2 + 1,
top: 123,
child: ClipRRect(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(40)),
child: Material(
color: Colors.red,
child: InkWell(
onTap: () {
print("Declined");
},
child: Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
child: Center(
child: Text("Decline",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
),
),
),
],
),
);
}
}