Flutter Card and Container design - flutter

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:

Related

How to set text widget under sized box in a container 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)),
),
],
)),
),

Flutter how to make the Container expand full height

I want to expand the background color of the Container to take the full height.
I already tried to set the height to double infinite and that just gets rid of my Two Text Widgets Title and Lemon Chicken. This is the code its inside a Scalfold widget this part its only the body.
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 36),
child: GestureDetector(
onTap: () => print('Add Image'),
child: Icon(
Icons.add_a_photo,
size: 70,
color: Theme.of(context).primaryColor,
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
child: Form(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
Text(
'Lemon Chicken',
style:
TextStyle(color: Theme.of(context).primaryColor),
)
],
),
),
),
),
),
],
),
),
This is the Image of my app.
I just want to expand the Widget has the pink background color
you can use mediaquery to find device's height and set that as container's height
Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
or as you did you can use double.infinity
Container(
height:double.infinity,
result:

How to go from one feed to another in flutter as same as in instagram

I am trying to apply the same concept of instagram to go from one feed to another.
Here i have like quiz1 part and i want to go to the another quiz2 section on tapping to to the right side and after pressing left side i want to go for quiz1 section.
Widget mainQuiz() {
return Column(
children: [
Spacer(
flex: 1,
),
Container(
padding: EdgeInsets.all(30),
child: Text(
"When was the first spaceship NOT launched?",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 24,
),
),
),
/* ---------------------OPTION 1----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
),
)
],
),
Text(
"Last Tuesday",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"55%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
/* ---------------------OPTION 2----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
),
)
],
),
Text(
"1969",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"45%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
/* ---------------------OPTION 3----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: SizedBox(
height: 15,
width: 15,
),
)
],
),
Text(
"1957",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(
flex: 2,
),
],
);
}
like this is quiz one section i want to go to the second quiz section which i can take as same ui
I would wrap your "mainQuiz" inside a Stack widget.
In that way you could add other 2 Containers inside the Stack's children.
Those containers could be positioned using "Positioned" widget.
One on the left of the screen and one on the right.
You should give then the size too.
I would let them transparent and I would give them a "GestureDetector" or something to detect the tap and call the Navigator to change screen.
As per your requirement, I think you should use
PageView
By default it has the swipe feature to go to the next and previous screen.
EDIT:-
As per you requirements, you know that you have a screen which already have interaction in form of giving answers, which has to be done using clicks. Though you can place empty containers in stack to implement clicks for left right, but as container need to have some width, thus they will overlap with you answers because basic padding is not more than 20. Thus I think you should go for swipe or specified buttons to go the left right i.e next and previous question.

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

Add border to a Container with borderRadius in Flutter

Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
border: Border(
left: BorderSide(
color: Colors.green,
width: 3,
),
),
),
height: 50,
),
This is supposed to show a rounded-edged container with a green left border 3px wide, and the child Text "This is a Container". However, it just shows a rounded-edged container with an invisible child and an invisible left border.
When I take out the borderRadius object, the child Text and the green left border is visible, but introducing it hides the left border and child Text again.
The major problem seems to be the custom left border, because using border: Border.all(width: 0) and borderRadius: BorderRadius.circular(10) makes the edges rounded as needed and also shows the child. But now I cant apply the green left border which is quite important in this particular setup.
So is there something I'm doing wrong, or is this a bug in flutter, or is it just something that is not allowed?
Thank you in advance.
Edit: The image below is the end result. The colors don't matter
It's not possible to add border: and borderRadius: at the same time, you'll get this error:
A borderRadius can only be given for uniform borders.
You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3)
]
Your sample code would be like this:
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
Edit: To achieve the example you now provided, you could do this:
Container(
padding: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.green,
),
height: 50,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
),
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
),
),
Another solution:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 12.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Colors.green,
),
),
Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
)
],
),
),
There is an answer here
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
),
This might be so late but also it might be useful for others.
You can wrap your Container inside a ClipRRect, give the ClipRRect the radius and give the Container the border!
Example:
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border(
left: BorderSide(width: 8.0, color: Colors.green),
),
),
),
),
This should do the UI you lastly posted.
If you want to achieve borderRadius you could also use a PhysicalModel, but you'll have to provide colour. You also can have a shadow for your widget.
PhysicalModel(
color: Colors.red,
elevation: 5,
shadowColor: Colors.blue,
borderRadius: BorderRadius.circular(20),
child: SizedBox(width: 75, height: 75),
)
I think an easier way inspired by #pablo 's answer would be to just make a boxShadow with and offset but without any blur.
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(10),
),
boxShadow: [
// to make elevation
BoxShadow(
color: Colors.black45,
offset: Offset(2, 2),
blurRadius: 4,
),
// to make the coloured border
BoxShadow(
color: Colors.blue,
offset: Offset(0, 4),
),
],
),
The decoration above will give us an elevated box which has a blue border in the bottom.
Another benefit of this approcah is that you can use it with
borderRadius: BorderRadius.circular(num)
Which means you can have a container with all rounded sides + a colored border.
Please note that the coloured border comes under the original shadow. This is done to prevent the elevation color from darkening the border.
I archieve do a Inkwell (that simulate a button) circular with an icon inside :
InkWell(
onTap: (){},
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
link example of result: https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
////Hope this will work for you,Thanks
import 'package:flutter/material.dart';
class System extends StatefulWidget {
const System({Key? key}) : super(key: key);
#override
_SystemState createState() => _SystemState();
}
class _SystemState extends State<System> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Padding(
padding: const EdgeInsets.only(top:80.0),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xffF6EBEC),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xffA24949)),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xffA24949),
child: Icon(Icons.close,
color: Color(0xffF6EBEC), size: 40),
),
const SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Invalid",
style: TextStyle(color: Color(0xffA24949), fontSize: 18)),
SizedBox(
width: 243,
child: Text("Details do not match the issuer records",overflow: TextOverflow.ellipsis,maxLines: 1,))
])
],
),
),
),
),
),
SizedBox(height: 20,),
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xFFE9F6EB),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xFF69A258),),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xFF69A258),
child: Icon(Icons.check_rounded,
color: Color(0xFFE9F6EB), size: 40),
),
const SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Valid",
style: TextStyle(color: Color(0xFF69A258), fontSize: 18)),
Text("Document successfully validated.")
])
]),
),
),
),
),
],
),
),
);
}
}