How to put a Wrap widget in a Column widget in Flutter - 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")])),
]),
)

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 do I get an overlay bottom and the top of bottom navigation to appear on a button click in flutter?

I want to show these two buttons click the middle button in the bottom navigation. Already I created the bottom dialog box but it's not working. on click of image button. please help me!
void _bottomSheet() {
Container(
height: 500,
width: double.infinity,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
children: [
Flexible(
flex: 1,
child: Align(
alignment: Alignment.centerRight,
child: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.black,
child: const Icon(
MyBottomIcon.barcode,
),
),
),
),
SizedBox(
width: 20,
),
Flexible(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.black,
child: const Icon(
MyBottomIcon.barcode,
),
),
),
),
],
),
],
),
);
}
Please review my code and correct me when I call this method showing nothing on the screen.

My suggestion is by using floatingActionButton
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(5),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () => showAlertDialog(context), // Call the function from example below
elevation: 7.0,
child: const Icon(
Icons.add,
size: 50,
),
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Create the showAlertDialog(context) function and suit the Widget as your needs.
showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.only(top: 380.0),
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: <Widget>[
Container(
width: double.infinity,
height: 800,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.transparent),
padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ClipOval(
child: Container(
color: Colors.yellow,
height: 70.0,
width: 70.0,
child: const Center(
child: SizedBox(
height: 30,
width: 30,
child: Icon(Icons.phone),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ClipOval(
child: Container(
color: Colors.red,
height: 70.0,
width: 70.0,
child: const Center(
child: SizedBox(
height: 30,
width: 30,
child: Icon(Icons.computer),
),
),
),
),
],
),
),
],
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(5),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () => {Navigator.pop(context)},
elevation: 7.0,
child: const Icon(
Icons.close,
size: 50,
),
),
),
],
),
],
),
),
);
},
);
}

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 can we make beautiful tile in 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),
]),
)
],
),
),
);

Pixel Error Because Of Columns between Row Flutter

I have a structure like Row(Column1,Column2) but when i try to put a floating button to my column2, i get pixelError, how can make spaceless between columns ? and this is what im trying to do
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 60),
),
Padding(
padding: const EdgeInsets.only(right: 60.0),
child: Container(
width: data.size.width * 80 / 100,
height: data.size.height * (20 / 100),
child: principalField,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(height: 30,
width: 30,
child: FloatingActionButton(
elevation: 40,
onPressed: () {},
),
)
],
),
Column(children: <Widget>[
child: FloatingActionButton(onPressed: (){},)
],)
],
)),

After seeing what you want to do, this might be a better way of doing it.
Looks like this:
Just a snippet that I wrote for you to see and potentially use:
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
const SizedBox(
height: 80,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: 300,
color: Colors.amber,
),
FloatingActionButton(elevation: 40, onPressed: () {}),
],
),
const SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: 300,
color: Colors.amber,
),
FloatingActionButton(elevation: 40, onPressed: () {}),
],
),
const SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: 300,
color: Colors.amber,
),
FloatingActionButton(elevation: 40, onPressed: () {}),
],
),
],
),
),
);
I hope this helps.