how can we make beautiful tile in flutter? - flutter

my amigos...
can i get the code of this in flutter?
i don't have any explanation more.
bring me the code right now!!
i'm so new about flutter, help me pls.
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
height: 220,
width: double.maxFinite,
child: Card(
elevation: 5,
child: Stack(
children: <Widget>[
Image(
image: AssetImage("assets/images/background.png"),
color: Colors.black45,
colorBlendMode: BlendMode.darken,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
fit: BoxFit.cover,
),
Container(
color: Colors.white,
child: Text('sdf'),
)
],
),
),
),
so far, it's my progress.


you can use below code and improve it as per your need. thanks i hope it will help
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
height: 220,
width: 300,
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Image(
image: NetworkImage(
"https://i.pinimg.com/236x/11/dc/43/11dc43c418eda8a1a7b74833be82ba64.jpg"),
color: Colors.black45,
colorBlendMode: BlendMode.darken,
width: double.maxFinite,
height: 110,
fit: BoxFit.cover,
),
Container(
padding: EdgeInsets.only(left: 10, right: 10),
color: Colors.white,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text("hello"), Text("hello")]),
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text("hello"),
SizedBox(width: 3),
Text("hello")
]),
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text("hello"),
SizedBox(width: 3),
Text("hello")
]),
SizedBox(height: 10),
]),
)
],
),
),
);

Related

How to change the text to the bottom center?

This is the design I want:
This is my current design:
I'm just freaking out. I would like to ask how to make the text in the bottom center position like the design picture I showed. Can anyone help me in solving this problem? I've tried but still can't get the design the way I want. I hope stack overflow can help me.
This is my code:
Container(
height: 150,
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.blue, width: 3.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 50,
width: 370,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Other medical records and vitals',
style: TextStyle(fontSize: 16, color: Colors.black)),
),
),
),
Expanded(
child: Container(
/*height: 50,
width: 370,*/
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Wrap(
direction: Axis.vertical,
children: [Text('Heart Rate')],
)
],
)
],
)),
)
],
)
],
),
),

Please try this
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Stack(
children: [
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Container(),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Center(
child: Column(
children: [
Text('Other medical records and vitals',),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Add your code/ Widgets here
Text('Heart Rate'),
SizedBox(width: 10),
Text('Heart Rate2'),
SizedBox(width: 10),
Text('Heart Rate3'),
]
),
],
),
),
),
],
),
),
);
}

You're almost there. Just move the Heart Rate to the parent Column and add an Align to move it to the bottom-center.
Check it out:
The code is going to be the following:
Container(
height: 150,
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.blue, width: 3.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 50,
width: 370,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: const Align(
alignment: Alignment.centerLeft,
child: Text('Other medical records and vitals',
style: TextStyle(fontSize: 16, color: Colors.black)),
),
),
),
],
),
const Spacer(),
Expanded(
child: Container(
/*height: 50,
width: 370,*/
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: const Align(
alignment: Alignment.bottomCenter,
child: Text('Heart Rate'),
)),
)
],
),
),

Your problem is your Row is not in right place and put it in Column,
and if you like you can add mainAxisAlignment: MainAxisAlignment.spaceAround to your Row too. if space are too close just wrap with Padding and set edge only,
Try this code (you can now wrap widget with Align and get best result as you like) :
Container(
height: 150,
width: double.infinity,
margin: const EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: const EdgeInsets.all(15),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.blue, width: 3.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 50,
width: 370,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: const Align(
alignment: Alignment.centerLeft,
child: Text('Other medical records and vitals',
style: TextStyle(fontSize: 16, color: Colors.black)),
),
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text('Heart Rate'),
SizedBox(width: 10),
Text('Heart Rate2'),
SizedBox(width: 10),
Text('Heart Rate3'),
],
),
),
result:

How to put a Wrap widget in a Column widget in Flutter

What I want:
image
child: IntrinsicWidth(
child: Column(
children: [
Stack(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Red(),
Green(),
],
),
const Align(
child: Yellow(),
),
],
),
const Blue(),
const PurpleWrap(),
],
),
),
What I got:
image
How can I achieve what I want?
Also can I achieve it without using IntrinsicWidth/Stack?

their is problem in the Blue(), inside the blue, you should just make the width: double.infinity; and what else problem you got ?

try this
SizedBox(
// your blue size
width: 300,
child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Row(children: [
Container(
height: 100,
alignment: Alignment.center,
color: Colors.pink,
child: Text("Flexible 22222")),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
Container(
height: 100,
alignment: Alignment.center,
color: Colors.amber,
child: const Text("Horizontally center")),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
Container(
height: 100, color: Colors.green, child: Text("Flexible")),
]),
Container(
height: 200,
width: double.infinity,
color: Colors.blue,
alignment: Alignment.center,
child: Text("Fixed Size")),
Container(
color: Colors.grey,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("Wrap 1")])),
Container(
color: Colors.grey,
margin: EdgeInsets.only(top: 8),
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("Wrap 2")])),
]),
)

Flutter: Nested row in column, how to fill row without expanding parent column

This is what I have:
source code:
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text('text'),
color: Colors.blue,
),
Container(
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),
),
How can I make the blue and red container to match the green container's width without making them larger as the green container?
this is what I want to get without using a fixed with for the containers inside the row. Also I have more than one element in the column and I don't want to use fixed sizes.

If the size if fixed then you can add a width to the container which are wrap with the row widget.
The reason i gave width 50 is beacause the parent container is having width of 100 already so remaning width are given to containers
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
child: Text('text'),
color: Colors.blue,
),
Container(
width: 50,
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),

You can use flexible widget to give row fixible width
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
child: Row(
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
)

Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child:
Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child:
Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
),
You can wrap only children of Row with Expanded widget.

Try this, you have to add Exapnded to the childeren of row widgets
Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.green,
child: Text('Hdddfhlsd', style: primaryTextStyle()),
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
)

**Replace your container by this **
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 100,
child: Column(
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
),
],
),
),
)

How to make Container height by depend on length of text flutter

i want to know, how let the container height depend on length of text and cover it in container not in picture 2 if i setting text too long the text is come over container then how to fix it
on message by b-akused02 : it's short and still in height :100,
on message by b-akused01 : it's long over container
on message by b-akused03 : it's short and still in height :100,
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
height: 100,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 20.0,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
SizedBox(
height: 20,
)
],
),
),
);
}

Wrap the given container in a Column and remove the height parameter from within.

Complete Code
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
child: Container(
child: Wrap(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
],
),
),
);
}

only create a Container without height.
Container(
width: 200, //for example
child: Text('any Text'),
)

Flutter: Layout Card

I'm working with Card , i have some problem with layout .
So, What i'm expected like this :
But when implement, not what i want , i'm already using
mainAxisAlignment: MainAxisAlignment.spaceBetween, But Not Work
Text Disini Judul always in center Container:
It's my Card Code
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
elevation: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Text('Disini Judul'),
),
Container(
child: Text('Disini Judul'),
),
],
),
),
Container(
child: Image.network(
'https://picsum.photos/250?image=9',
width: 150),
)
],
)
],
),
),
)
Can you help me with this layout ?
Thank's

Add child in to Container base on you needs
body: SingleChildScrollView(
child: Container(
color: Colors.black,
height: 200.0,
width: double.infinity,
child: Row(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.yellow,
height: 100.0,
width: double.infinity,
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
),
),
Container(
color: Colors.green,
height: 50.0,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Your date'),
Text('Your Category')
],
),
)
],
),
),
Container(
color: Colors.red,
height: double.infinity,
width: 150.0,
child: Image.network("https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg",
fit: BoxFit.fill
),
),
],
),
),
),

you can easily achieve this using Stack widget, have a look at below code
Container(
height: 180,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
elevation: 5,
child: Stack(
children: <Widget>[
Positioned(
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
top: 0,
right: 150,
left: 10,
),
Positioned(
bottom: 0,
left: 10,
right: 150,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Date: 18-Sep-2019'),
Text('Category: Sport')
],
),
),
Positioned(
top: 0,
right: 0,
child: Container(
child: Image.network('https://picsum.photos/250?image=9',
width: 150),
),
)
],
),
),
)