What is this and how can I build this in flutter? I don't know how to create it and I can't design these buttons.
This is the design which I want to create
I'm guessing you do not know how to create those buttons, this is a scuffed code but it should give you an idea of how to create it.
Container(
width: 220.0,
height: 65.0,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Color.fromARGB(255, 177, 177, 177)]),
borderRadius: BorderRadius.circular(35),
),
alignment: Alignment.center, // where to position the child
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Container(
width: 200.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Color.fromARGB(255, 226, 219, 219)),
child: Row(
children: [
Expanded(
flex: 2,
child: Container(
margin: EdgeInsets.symmetric(
vertical: 7, horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color.fromARGB(255, 78, 151, 185)),
)),
Expanded(
flex: 5,
child: Container(
padding: EdgeInsets.symmetric(vertical: 7),
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: Text("title")),
Expanded(child: Text("subtitle"))
],
),
),
)
],
),
),
),
),
should result in something like this
adjust colors/dimensions/radius and text accordingly. You can turn it into a button with a gestureDetector Wrap it with a statefulWidget and assign a pressed parameter to it to control how it behaves when clicked and what to change. Please be mindful of the dimensions when creating it, use media sized query to not over flow
Related
I'm new to flutter, I'm trying to create a container, inside SingleChildScrollView. when i create shadow of containers, it is a straight line which is due to the boundary of SingleChildScrollView.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.only(top: 35, left: 5, bottom: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(3),
child: Container(
height: 170,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(colors: [
Colors.deepOrange,
Colors.orange,
], transform: GradientRotation(120)),
),
),
),
Padding(
padding: EdgeInsets.only(bottom: 20),
child: Container(
height: 170,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(colors: [
Colors.deepOrange,
Colors.orange,
], transform: GradientRotation(120)),
boxShadow: [
BoxShadow(color: Colors.orange.shade200,offset: Offset(10,5),spreadRadius: 1,blurRadius: 100)
]
),
),
),
Padding(
padding: EdgeInsets.all(3),
child: Container(
height: 170,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(
colors: [
Colors.deepOrange,
Colors.orange,
],
transform: GradientRotation(120),
),
),
),
)
],
),
)
i have applied shadow to the second padding. here is the image and i circled the part which doest fit in the UI
image of problem
Add clipBehavior: Clip.none to the SingleChildScrollView. The default is Clip Clip clipBehavior = Clip.hardEdge.
SingleChildScrollView(
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.only(top: 35, left: 5, bottom: 10),
child: Row(),
);
I would like to add the text "Appointments" like shown in the example below. I've tried using the Text widget under Image.asset but I don't think I'm using it right. I'm still new to Flutter so any help would be much appreciated.
Expected Output
This is the code I have so far:
Container(
height: 250,
width: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[1],
color: Color.fromARGB(255, 255, 255, 255),
),
child: Align(
alignment: Alignment(0, -0.5),
child: Image.asset("assets/appointment.png", height: 150, width: 150),
),
),
Use below code :
Container(
height: 250,
width: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[1],
color: Color.fromARGB(255, 255, 255, 255),
),
child: Column(
children: [
Align(
alignment: Alignment(0, -0.5),
child: Image.asset("assets/appointment.png", height: 150, width: 150),
),
SizedBox(height: 20,),
Text('Appointments',style: TextStyle(color: Colors.black,fontSize: 18),),
],
),
),
Used card and column widget for this type of UI.
Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)),
child: Column(
children: [
// Your Image Widget
// Your Text Widget
],
),
),
I want to add two boxes, one inside another. Here's my code and its not working for two boxes. how should I correct this. doc UI in this doc you can see the UI I implement so far and the UI I want to be implement.
Widget DetailBox() => Padding(
padding: const EdgeInsets.only(left: 25, right: 25),
child:Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.white,
),
// alignment: Alignment.bottomCenter,
height: 400,
width: 300,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.lightBlue,
),
// alignment: Alignment.bottomCenter,
height: 100,
width: 300,
),
),
],
),
);
May it help you
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5,
shadowColor: Colors.blue.shade200,
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
borderRadius: BorderRadius.only(topLeft:Radius.circular(25),topRight:Radius.circular(25))
),
),
),
Expanded(
flex: 3,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(bottomRight:Radius.circular(25),bottomLeft:Radius.circular(25))
),
),
)
],
),
),
According to the design of the app, put the image in the bule box.
How to create Row with two containers with centered image and text above image also centered.
Like in image attached.
enter image description here
Is this what you are trying to do:
class ExampleDesign extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 180,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
SizedBox(
width: 20,
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
],
),
),
);
}
}
OUTPUT:
I hope this answers your question.
Create a widget using this post How to to display text over the images in Flutter? which returns an image above and a text below, Wrap two of these widgets using a Row. That should work.
I have to create a widget with the following design
I have a basic layout created for the same below. The below code is inside a Column.
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
/*******Outer Container********/
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
border: Border.all(color: Colors.grey, width: 0.5),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text("1981-June-01"),
SizedBox(width: 8),
Icon(Icons.calendar_today),
],
),
),
SizedBox(width: 8),
/*******Inner Container********/
Container(
padding: EdgeInsets.all(8),
child: Text("38Yrs"),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(8)),
border: Border.all(color: Colors.grey, width: 0.5),
),
),
],
),
)
],
),
The result i get is the following
There is still some unwanted padding between the parent container and the bounds of the Row that contains the two containers. I tried using IntrinsicHeight Widget but the UI stayed the same. I wrapped the outer container and the Row inside it with IntrinsicHeight Widget. One at a time and on both at the same time as well. But no change.
What i want to do is to remove that extra padding between the outer container and the inner container, and make the inner container border/height same as the Outer container. Am i missing something?
Any help is appreciated.
This is the output image:
Row(
children: <Widget>[
/*******Outer Container********/
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
border: Border.all(color: Colors.grey, width: 0.5),
),
child: Row(
children: <Widget>[
Container(
//padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(" 1981-June-01"),
SizedBox(width: 8),
Icon(Icons.calendar_today, size: 15),
],
),
),
SizedBox(width: 8),
/*******Inner Container********/
Container(
padding: EdgeInsets.all(8),
child: Text("38Yrs"),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.only(
topRight: Radius.circular(8),
bottomRight: Radius.circular(8)),
// border: Border.fromBorderSide(BorderSide.none),
),
),
],
),
)
],
),
As specified by #pskink in the comments under the question, a more simplified answer would be to replace the Row with the following code(copied from the comment under the question by #pskink)
Material(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(color: Color(0xFFDDDDDD), width: 1)),
clipBehavior: Clip.antiAlias,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(width: 8),
Text("1981-June-01", style: dateTextStyle),
SizedBox(width: 8),
Image.asset(
"assets/images/widgetImages/calendar.png",
width: 15,
height: 15,
),
SizedBox(width: 8),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 12),
child: Text(
"38Yrs",
style: dateTextStyle,
),
color: Color(0xFFEEEEEE),
),
],
),
),
This code is simpler in terms of number of widgets in the widget tree.