Develop Reference

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

Run the ontap() gesture on the card in flutter

I have been trying to run the onTap() function from material package of flutter but it seems to throw me this error:
"The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator."
I am in need of running this function to reach out to the called function of new screen in the application.
The code is below:
class _HomePageState extends State<dashboardpage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
height:130*.99,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: AssetImage('assets/bismillah.png'),fit: BoxFit.fitHeight,
)
),
),
SafeArea(
child: Padding(
padding: EdgeInsets.only(top: 0),
child: Column(
children:<Widget> [
Container(
height: 100.0,
child: Row(
children:<Widget> [
Center(
child: SizedBox(
width: 90.0,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end
)
],
),
),
Expanded(
child:GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
)
),
),
),
)
]
);
}
}
This is the code specimen and the code is stuck on onTap() line.
Please help me!

Use GestureDetector
GestureDetector(onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
)
),
)

how to make the flex in box flutter to be centered each rows if the one text row long?

I have boxes list and they are not really tiny or not in the centered right, especially the name of the food, because they are too long and make more space on it,
here is my code for the box list
class CategoryMeals extends StatelessWidget {
final String title;
final String image;
CategoryMeals({this.title, this.image});
#override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 14,
margin: EdgeInsets.all(14),
child: Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Text(title)
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.only(right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("Button 1"),
Text("Button button 2")
],
),
)
)
],
)
),
Flexible(
flex: 1,
child: Image.asset(image)
)
],
),
)
);
}
}
here is my expected :
the result box I want
do I miss something? or should I use Stack or what else?

Try this
class CategoryMeals extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.black,width: 1),
color: Colors.white,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text("askNilesh is here to help you",textAlign: TextAlign.center,)),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[Text("Button 1",textAlign: TextAlign.center), Text("Button 2",textAlign: TextAlign.center)],
),
),
FlutterLogo(
size: 20,
)
],
),
);
}
}
OUTPUT

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,