Flutter Align the widget onto the top in ROW - android

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

Related

How can i display my firebase data on my text? Flutter

how can i display my firebase data on my text view in flutter? i have made a database where i store the users name in. What i want to do now is display that name from my database in firebase to my textview. i can't seem to figure it out.
this is my code for the textview
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: size.height * 1,
decoration: BoxDecoration (gradient: LinearGradient(colors: [
hexStringToColor("FFBEC8"),
hexStringToColor("fe98a8"),
hexStringToColor("FC98A7"),
hexStringToColor("#FF8799")
]
))),
SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 64,
margin: EdgeInsets.only(bottom: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 29,
backgroundImage: AssetImage(
'assets/logo.png'),
),
SizedBox(
width: 16,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'gfffff',
style: TextStyle(
fontFamily: "Montserrat Medium",
color: Colors.white,
fontSize: 20),
),
],
)
],
),
),
i don't know if this is enought code for you to know how i stored it
FirebaseFirestore.instance.collection("Userdata").doc(value.user!.uid).set({"name": _userNameTextController.text});

Position of the button in custom list item

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

Flutter Row() - Align 3 widgets evenly

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'),
)
],
),

How to vertically expand container widget in flutter

trying to expand Expanded or Container vertically to match its height with Row widget height, here is my code
#override
Widget build(BuildContext context) {
return InkWell(
onTap: ()=> onDepartClicked(),
child: Container(
padding: EdgeInsets.all(16),
child: Card(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(department.name,
overflow: TextOverflow.visible,
style: TextStyle(fontSize: 20),
),
Container(
margin: EdgeInsets.only(top: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset("assets/images/feedback.png", width: 20, height: 20,),
SizedBox(width: 4,),
Text(department.phone),
SizedBox(width: 16,),
Image.asset("assets/images/feedback.png", width: 20, height: 20,),
SizedBox(width: 4,),
Text(department.type),
],
),
),
Container(margin: EdgeInsets.symmetric(vertical: 8),child: Divider(height: 0.3, color: Colors.grey,)),
Container(
child: Text(department.description,
maxLines: 3,
style: TextStyle(fontSize: 13),
),
)
],
),
),
),
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset("assets/images/feedback.png",
width: 20,
height: 20,
fit: BoxFit.scaleDown,
),
],
),
),
],
),
),
),
);
}
I want to expand this block in the above code (second child of the Row):
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset("assets/images/feedback.png",
width: 20,
height: 20,
fit: BoxFit.scaleDown,
),
],
),
),
I want to achieve this view with blue area expanded vertically in parent

Edit after more clarification on the question:
The idea behind the code below is like the This Image.
Left child of the row contains a column, the column has 3 children.
The first child of the column is the title, second one is a Row of phone and type and the last one is the description.
For "phone" and "type" you can use ListTile but you should put them on something like Flexible or define size for them.
I deinded a Listview and put 10 card inside it.
Here is the code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: (BuildContext context, int index) {
return _card();
},
shrinkWrap: true,
itemCount: 10,
),
),
);
}
Widget _card() {
return Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'UBIT',
overflow: TextOverflow.visible,
style: TextStyle(fontSize: 20),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.message),
SizedBox(width: 4),
Text('+09210000000'),
SizedBox(width: 16),
Icon(Icons.message),
SizedBox(width: 4),
Text('Science'),
],
),
Divider(),
Text(
'Lorem Ipsum ist ein einfacher Demo-Text für ' +
'die Print- und Schriftindustrie. Lorem Ipsum ' +
'ist in der Industrie bereits der Standard Demo-Text' +
' seit 1500',
textAlign: TextAlign.justify,
),
],
),
),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Icon(
Icons.message,
size: 30.0,
),
),
],
),
),
);
}
}

Wrap the Container in a SizedBox with height:double.infinity to make it take all the available space, in your case the height of the row.
Expanded(
child: SizedBox(
height:double.infinity,
child:Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown,),
),
),
)

Align Widget inside Expanded in row in flutter

I'm trying to align widget inside the row but the widget automatically aligns to the center. I want to align both the widget to the top of the row.
Widget PlayerConnectWidget(double width,double height){
return SingleChildScrollView(
child: Container(
margin: EdgeInsets.only(left: width*0.03,right: width*0.03,top: width*0.05),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(flex:1,fit:FlexFit.loose,child:MyFeedTile(),),
Flexible(flex:1,fit:FlexFit.loose,child:_logoContainer(width),),
],),
SizedBox(height: width*0.02),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(flex: 7,child: Container(
margin: EdgeInsets.only(right: width*0.03),
padding: EdgeInsets.all(width*0.03),
decoration: BoxDecoration(color: Colors.white70,borderRadius: new BorderRadius.circular(12.0),),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Venue'),
new Divider(
color: Colors.black87,
),
Text('Location'),
new Divider(
color: Colors.black87,
),
Text('Sports'),
new Divider(
color: Colors.black87,
),
Text('Opening Times'),
new Divider(
color: Colors.black87,
),
Text('Notes'),
new Divider(
color: Colors.black87,
),
],),
),),
Expanded(flex: 3, child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
// mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// SizedBox(height: width*0.02),
Container(
decoration: BoxDecoration(
color: MyColors.yellowBg,
borderRadius: new BorderRadius.circular(8.0),
),
child: FlatButton(
onPressed: (){
},
child: Text(
'Message',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)
)
),),
SizedBox(height: width*0.02),
Container(
decoration: BoxDecoration(
color: MyColors.yellowBg,
borderRadius: new BorderRadius.circular(8.0),
),
child: FlatButton(
onPressed: (){
},
child: Text(
'Continue',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)
)
),)
],),)
],)
],
),
)
);
}
Widget _logoContainer(double width){
return Container(
margin: EdgeInsets.only(left:width*0.05),
height: 110.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/cmp_click.png"),
fit: BoxFit.fill,
)
),
);
}
Widget MyFeedTile(){
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => FeedView()),);
},
child: Container(
padding: EdgeInsets.only(top:width*0.02,bottom: width*0.02),
decoration: BoxDecoration(
color: MyColors.colorPrimaryDark,
borderRadius: new BorderRadius.circular(12.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(flex: 3,
child: Container(
//decoration: BoxDecoration(color: Colors.green[100]),
height: 50,
width: 50,
margin: EdgeInsets.all(width*0.01),
child: CircleAvatar(
radius: 50.0,
backgroundImage:
NetworkImage('https://via.placeholder.com/150'),
backgroundColor: Colors.transparent,),),
),
Expanded(flex: 7,child: Container(
//decoration: BoxDecoration(color: Colors.green[100]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('User name',style: TextStyle(color: Colors.white,fontFamily: 'bold'),),
SizedBox(height: width*0.01),
Text('Time',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
SizedBox(height: width*0.01),
Text('Location',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
SizedBox(height: width*0.01),
Text('Date',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
],),),)
],),
),);
}
I'm getting this
and I'm trying to achieve this
and this

You just need to add the following line in your code :
crossAxisAlignment: CrossAxisAlignment.start
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,

There is a property name cross-axis alignment for both Row and Column
As I see you have used main axis alignment.
Main Axis for Column is to align children Vertically.
Main Axis for Row is to align children Horizontally.
Cross Axis for Column is to align children Horizontally.
Cross Axis for Row is to align children Vertically.
So you can try with this for your row
crossAxisAlignment: CrossAxisAlignment.start,

Categories

Resources