Centering a Row in a Stack - flutter

I have a widget that consists of a Row and an Icon in a stack. I want to center them both vertically in the stack (the row in the center, the icon in the right center). I wrap both widgets in an Align widget, but this only is affecting the Icon, not the Row. How can I have the ROw centered vertically?
This is my code
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(searchLanguage == SearchLanguage.english ? word.english : word.korean,
style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text(searchLanguage == SearchLanguage.english ? word.korean : word.english,
style: Theme.of(context).textTheme.bodyText1),
],
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () => deleteCallback(word),
),
)
],
),
),
);
}
This is the outcome

Try using the alignment of the stack instead:
Stack(
alignment: Alignment.topCenter,
Alignment properties works, also remove the unnecessary alignments
Full code:
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("One", style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text("Two", style: Theme.of(context).textTheme.bodyText1),
],
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () {},
),
)
],
),
),
)

Related

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

Padding and layout of card in flutter

I am trying to add padding to the text in the card and for some reason, it is not working.
This is my code:
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 170.0,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Column(
children: <Widget>[
Align(
child: Text('In an emergency, call 999.'),
alignment: Alignment(-1.2, 0),
),
Align(
child: Text(
"If you're in crisis and need to speak to someone call NHS 111."),
alignment: Alignment(-1.2, 0),
),
],
),
),
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('999'),
onPressed: () => launch("tel://000"),
),
),
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('111'),
onPressed: () => launch("tel://000"),
),
Currently it looks like this:
I am wanting to add padding around the text so it looks better but using alignment isn't affecting the second subtitle and isn't affecting the padding above or below any of the text. Any help would be appreciated!
Change mainAxisAlignment property of your Column as following and remove the mainAxisSize property
Column(
mainAxisAlignment: MainAxisAlignment.center,
// ...
),
Edit
Adjust your subtitle like this
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Align(
alignment: Alignment(- 65.0, 1.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('In an emergency, call 999.', textAlign: TextAlign.left,),
Text("If you're in crisis and need to speak to someone call NHS 111.", textAlign: TextAlign.left,),
],
),
),
),

Flutter - Scroll with a fixed widget

I would like to do a scroll that the map part fixed on top, once i scroll up those widget can be overlay on top of the map.
i tried to do the scroll effect.
i use a stack with one container(the map) and one SingleChildScroll.
but the map is not able to tap after i put the SingleChildScroll on top of the map.
So is there any ways to made this out?
Any suggestions that i can do this design?
Thanks a lot!
This is the normal view
after i scroll up little bit
here is the code
return Scaffold(
key: _scaffoldKey,
backgroundColor: ThemeColors.orangeYellow,
floatingActionButton: Padding(
padding: EdgeInsets.only(right: 30),
child: Row(
children: [
_profileButton,
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
body: Stack(
children: [
Positioned(
top: 0,
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Container(),
_map,
_nearbyRestaurantBox,
_getCurrentLocationButton,
],
),
),
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Column(
// alignment: Alignment.bottomCenter,
// overflow: Overflow.visible,
children: <Widget>[
// Container(),
// _map,
Padding(
padding: EdgeInsets.only(top: _mapHeight - 70),
),
Stack(
children: [
Column(
children: [
SizedBox(
height: 70,
// child: Container(
// // color: Colors.green,
// ),
),
SizedBox(
height: 70,
child: Container(
color: Colors.amber,
),
)
],
),
// Padding(
// padding: EdgeInsets.only(top: 35),
// ),
Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(top: 5),
child: _searchBox,
),
)
],
),
// Positioned(top: 0, child: _map),
// _searchBox,
// _nearbyRestaurantBox,
// _getCurrentLocationButton,
],
),
Container(
color: ThemeColors.orangeYellow,
child: Center(
child: Column(
children: <Widget>[
_categoryBox,
..._buildBanners(),
],
),
),
),
],
),
)
],
),
);

Slidable resizes widget below

I am using Slidable and whenever it is used, the widget below is moved up.
Widget buildItemList(BuildContext context, DocumentSnapshot document) {
return new Container(
child: Card(
elevation: 10.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Slidable(
actionPane: SlidableDrawerActionPane(),
//actionExtentRatio: 0.25,
closeOnScroll: false,
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: (){},
)
],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// Unnecessary code was removed
children: <Widget>[
Container(
padding: const EdgeInsets.only(right: 12.0),
child: Row(
children: <Widget>[
Text('0'),
Text('/'),
Text(document['value'].toString())
],)
)
]
),
),
),
);
}
It does not matter where i put Slidable, it always resizes the widget.
Someone able to help?
Thank you!
This will fix the issue
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: double.maxFinite,
width: double.maxFinite,
padding: const EdgeInsets.only(right: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('0'),
Text('/'),
Text('value'.toString())
],
)),
)
],
),
If you don't need extra functionality you can remove the two rows and simply write something like
child: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 12.0),
child: Text('0/${document['value'].toString()}'),
),

How to make a widget take as much width as the screen in Flutter?

In my flutter project, I haved used a Row where I aligned two text horizontally, the first Text size is fixed but the I want the second one to have as much width as the screen size.
Here's is my code-
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("City: "),
),
Container(
color: Colors.red,
child: Text("London"),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Country: "),
),
Container(
color: Colors.red,
child: Text("England "),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Address: "),
),
Container(
color: Colors.red,
child: Text("aaaaa zzzzz wwwww qqqqqq rrrrr"),
)
],
)
),
),
),
With the above code I got the following output-
The problem is the black marked section in the image.
So, I need help to know how the text will take as much width as the screen size & rest of the text will be shown in the next line.
The text widget has a property called overflow you can use that to either clip the extra string or put ellipsis. You could try different types of TextOverflow like a clip, ellipsis, fade, etc. As for the putting it to the next line you could set maxLines property to any number you like.
example:
Container(
width: MediaQuery.of(context).size.width / 2
child: Text(
"Hello world!!!!",
maxLines: 2,
overflow: TextOverflow.ellipsis
),
);
This problem can be solved by a widget called Flexible. I had to write few more lines for solving these but it works perfectly for the problem mentioned in the question.
So, here's the code-
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("City: "),
),
Container(
color: Colors.red,
child: Text("London"),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Country: "),
),
Container(
color: Colors.red,
child: Text("England "),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Address: "),
),
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.red,
child: Text("aaaaa zzzzz qqqqqq eeeeeeeeeeeeee "),
)
],
),
),
],
)
),
),
),