I am trying to [![make the button ][1]][1] at the corner of the listitem but its not working
this is what i tried
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
color: Colors.black12,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 100,
width: 100,
color: Colors.black,
child: Image.network(_items[index]['product_img']),
),
Container(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
child: Container(
padding: const EdgeInsets.all(8.0),
child: Text(_items[index]['product_name']),
),
),
Container(
padding: const EdgeInsets.all(8.0),
child: Text('M.R.P: ₹ ' +
_items[index]['product_price']),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Align(
alignment: Alignment.bottomRight,
child: Container(
padding: EdgeInsets.all(8),
child: ElevatedButton(
child: Text("Add +"),
onPressed: () =>
print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(32.0),
),
),
),
),
),
],
),
)
],
),
)
tried to set the size also but that is also not working , In one of the sugession i was told to put crossAxis also that i tried and still not working
[1]: https://i.stack.imgur.com/RQ1hY.png
Related
I have a close button on right corner. But When i scroll down its scrolling too of course. But i want to it stick to top corner always even if i scroll down. How can i do it ?
My Codes:
Container(
height: MediaQuery.of(context).size.height * 0.95,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildCloseButton(context),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
radius: 48,
backgroundImage: NetworkImage(therapist.image ?? ""),
)....,
_buildCloseButton
Padding _buildCloseButton(context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
const CircleBorder(side: BorderSide(color: Colors.white)),
),
backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
child: const Icon(Icons.close, color: Color.fromARGB(255, 48, 58, 87)),
),
],
),
);
}
I tried make it more clear with images . But you can always feel free to ask questions. I tried with Positioned widget too but its same too.Its not sticking to top right corner.
Use Stack Widget and position your button with Positioned Widget like this:
Container(
height: MediaQuery.of(context).size.height * 0.95,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Stack(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
radius: 48,
// backgroundImage: NetworkImage(therapist.image ?? ""),
)
],
),
),
// your close button
Positioned(
right: 10,
top: 10,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
const CircleBorder(side: BorderSide(color: Colors.white)),
),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.white),
),
child: const Icon(Icons.close,
color: Color.fromARGB(255, 48, 58, 87)),
),
)
],
),
),
)
I'm trying to align 3 widgets inside a Row() evenly.
Just it is not working out as I need it to.
I really do not know how to fix this as I have been at it for hours.
I'm sure thet I'm missing something here.
I'm adding my code and a screenshot of current result.
Updated code!
The issue now seems to couse an out of bounds
New Screenshot
Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: CircleAvatar(
backgroundColor: randomColor,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: Text(
'John Doe',
style:
Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
child: Text(
'Online',
style: Theme.of(context)
.textTheme
.headline6
.copyWith(
color:Theme.of(context).primaryColor,
),
),
),
],
),
],
),
],
),
),
There are a few ways to do it. I modified your Code a bit so you can see it. Your Approach so far was completely fine, you just had to set a width for your Container. Otherwise Flutter doesn't know how to space the elements in the row. Alternatively you could just calculate the width of your Row, and get the width for the Children from that.
I would also recommend putting your Widgets in the Row into Containers for easier handling (like I did below). Hope it helps! Good luck.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}
EDIT:
If you want to position your different Elements more freely, I would give the Containers with your Text/Icon in them a fixed width (Calculated from your Row width) and then you can use the Containers 'alignment' property.
In this example I give the green and grey Containers each 20% of the Row and make their content align to the left, and the yellow Container 60% and align it's content to the right.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}
Simple, do like this.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: Text('One'),
),
RaisedButton(
onPressed: () {},
child: Text('Two'),
),
RaisedButton(
onPressed: () {},
child: Text('Three'),
)
],
),
I have an issue in ROW that one child has many items so it is large and another child has fewer items so its height is small so the less item is showing in the center of the ROW, so I need it to align to the top inside the ROW, you can have a look at the image.
Please have a look at my code as well.
rowList = Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: mainBodyList,
);
MAIN BODY LIST
Container(
width: screenWidth * 0.49,
child: Card(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
//width: 200,
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.black12,
),
child: Row(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.white,
child: SizedBox(
width: 40,
height: 40,
child:
/*Image.asset(
'assets/icons/doc_icon.png'),*/
Icon(
Icons.playlist_add_check,
color: AppTheme.primaryColor,
),
),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_localization.localeString(name),
style: TextStyle(color: AppTheme.primaryColor),
),
],
),
),
),
],
),
),
Container(
child: Column(
children: _dynamicListWidget(list),
),
),
],
),
),
);
You need to set crossAxisAlignment as CrossAxisAlignment.start
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: mainBodyList,
);
This is my code,I need to set the SingleChildScrollView in the body.I want to scroll the entire screen.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Container(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/login.jpg"),
fit: BoxFit.contain,
alignment: Alignment.topCenter)),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back,
color: Colors.white, size: 32),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
You need to wrap you Form widget with singleChildScroll view
Like below
return Scaffold(
body: SingleChildScrollView(child:Form(
key: _formKey,
child: Container(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/login.jpg"),
fit: BoxFit.contain,
alignment: Alignment.topCenter)),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back,
color: Colors.white, size: 32),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
)
I'm making custom toolbar with background shape but my back button is getting correct the alignment to the text
Widget _toolBar(String headerText){
return Container(
decoration: BoxDecoration(
color: MyColors.greenHeader,
borderRadius: new BorderRadius.only(
bottomLeft: const Radius.circular(15.0),
bottomRight: const Radius.circular(15.0))
),
child:Center(child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child:Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),),
],),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child:IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: (){},
)
),
],),
],
),)
);
}
The above code also tried without stack by Using Row with expanded but the text alignment going wrong the text getting center to its expanded widget n
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: _buildBackground(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 13,
child:_toolBar('VENUE LOGIN')
),
Expanded(
flex: 87,
child: Container(
child: LoginBody(),
),
)
],
)
],
),
);
You can try center your Text and IconButton widgets.
Stack(
children: <Widget>[
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)),
),
],
),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child: IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {},
)),
],
),
),
],
),
You can Try like this
appBar: PreferredSize(
preferredSize: Size(null, 100),
child: Container(
width: MediaQuery.of(context).size.width,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)
),
child: Container(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.navigate_before,size: 40,),
Text("Center",style: TextStyle(fontSize: 30),),
Icon(Icons.navigate_before,color: Colors.transparent,),
],
),
),
),
),
),