How to alight last child of row to alight completely right? - flutter

I have a ROW with 3 children.
Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(20.0),
child: Row(
children: [
Text(
'hello'
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SizedBox(
child: Text(
'hello'
)),
),
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('asdasd'),
)
];
},
)
],
),
)
Now I want last PopupMenuButton to completely right (Basically at the end of the containter widget.)
How can i do that?


Add a spacer()
Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(20.0),
child: Row(
children: [
Text(
'hello'
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SizedBox(
child: Text(
'hello'
)),
),
Spacer(), //here
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('asdasd'),
)
];
},
)
],
),
)
If it throws unbound error then add a width to the container
width : MediaQuery.of(context).size.width,
More about spacer

Related

How to add some space to row items in flutter?

I have a screen that contains a Row widget with 3 Column children. I want to add a space for the first children and another space for the second children. In general, I want a screen like this:
I try with these codes but not work correctly.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
],
);
Can you help me?

Add a SizedBox to the children of the Rows, each with different height.

I hope this will help you and I just modified it with some Container().
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Column(
children: [
Container(
height: 50,
color: Colors.red,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
//////here you have to add SizedBox widget with different heights
const SizedBox(
height: 40,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
],
)
Output:

You can add a SizedBox between the items. Like:
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
item(),
SizedBox(height:20),
item(),
SizedBox(height:20),
item(),
],
),
),
),
I think that is simple, but works.
You can use a Container with margins in the items too.
If you want a more complex item, you can use ListView.separated.
ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.black,
),
itemCount: 20,
itemBuilder: (context, index) => Padding(
padding: EdgeInsets.all(8.0),
child: Center(child: Text("Index $index")),
),
)

How make something fixed position during scroll in Flutter

I'm up to making a screen like on the pic
I'd like to add scroll for gridview, but the trouble now is I don't really understand how to achieve that.
When I wrap Grid with SingleChildGridView, I've got an error that bottom overflowed. Example is on the second screen:
Obviously, it's happening as the GridView is a part of Column which causes the error. But how can I find a wayaround to avoid wrapping the column with let's say singlechildscrollview and at the same time making scrollable only GridView ?
Here is my code:
Scaffold(
appBar: HomeAppBar(),
bottomNavigationBar: CustomNavBar(),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hemendra',
style: Theme.of(context).textTheme.displaySmall
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Welcome to Laza.',
style: Theme.of(context).textTheme.bodyMedium
),
),
Searchbox(),
BlocBuilder<ProductBloc, ProductState>(
builder: (context, state) {
if (state is ProductLoaded) {
return Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
mainAxisExtent: 300,
crossAxisCount: 2,
),
itemCount: state.products.length,
itemBuilder: (BuildContext ctx, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<ProductDetailsBloc>(
context)
.add(ProductDetailsEvent(
state.products[index]));
Navigator.pushNamed(
context, '/product_details');
},
child: Container(
height: 240,
child: Image.network(
state.products[index].imageUrl, fit: BoxFit.fill,),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
icon: Image(
image: AssetImage('heart.png'),
),
onPressed: () {},
),
],
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
children: [
Expanded(
child: Text(
maxLines: 2,
state.products[index].name,
style: Theme.of(context).textTheme.bodySmall
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
maxLines: 2,
"\$" +
state.products[index].price
.toString(),
style: TextStyle(
color: HexColor('1D1E20'),
fontWeight: FontWeight.w600),
),
],
))
],
),
],
);
},
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
)
],
),
),
);
}
}

remove SingleChildScrollView and warp you BlocBuilder with Expanded widget .
so you code widget inside Scaffold body like this
Column(
children: [
searchBox(),
SizedBox(height:70, child: horizontalBrandList()),
Expanded(child: BlocBuilder(...))
],
)
created code similar UI code for better understanding update your code accordingly:
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//SEARCH BAR
const TextField(decoration: InputDecoration(hintText: "Search")),
const SizedBox(height: 12),
// HORIZONTAL LIST VIEW
SizedBox(
height: 50,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(
10,
(i) => Container(
width: 50,
color: Colors.accents[i % 16],
alignment: Alignment.center,
child: Text('$i'),
),
),
),
),
const SizedBox(height: 12),
// GRID LISTVIEW
Expanded(
child: GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: MediaQuery.of(context).size.width * 0.5,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 20,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Center(child: Text(index.toString())),
);
},
),
)
],
),
)
You are adding ListView inside Column so You need to wrap with with Expanded Widget. in ListView contains own ScrollController so no need to wrap it with external SingleChildScrollView

flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. in GridView widget

I want to create a grid view with four columns in two rows if I add a widget GridView() it shows an error on compile time.
it shows an error multiple times when the app is hot reload after saving file.
Error: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
Error:
Image of Error shows in terminal please look into this
Here is my code:-
import 'package:flutter/material.dart';
import 'package:dateapp/utils/widget_functions.dart';
import 'package:dateapp/custom/BorderIcon.dart';
class Gender extends StatelessWidget{
#override
Widget build(BuildContext context){
final Size size = MediaQuery.of(context).size;
final ThemeData themeData = Theme.of(context);
final double padding = 25;
final sidePadding = EdgeInsets.symmetric(horizontal: padding);
//return SafeArea(
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: const [Color.fromRGBO(132,105,211,1), Color.fromRGBO(93,181,233,1), Color.fromRGBO(86,129,233,1)],
),
),
width: size.width,
height: size.height,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
addVerticalSpace(padding),
Padding(
padding: sidePadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
InkWell(
onTap: (){
Navigator.pop(context);
},
child: BorderIcon(
padding: new EdgeInsets.all(0.0),
height: 100,
width: 0,
child: Icon(
Icons.arrow_back_ios_outlined,
color:Colors.white,
),
),
),
]
),
),
addVerticalSpace(padding),
Padding(
padding: sidePadding,
child: Text(
'Your profile info',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),),
),
addVerticalSpace(20),
Padding(
padding: sidePadding,
child: Column(
children: <Widget>[
addVerticalSpace(15),
Column(
children: <Widget>[
Expanded(
child: Column(
children: [
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
children: [
Text('one'),
Text('two'),
Text('Three'),
Text('Four'),
],
),
],
),
),
],
),
addVerticalSpace(10),
],
),
),
],
),
],
)
),
floatingActionButton: Container(
child: Padding(
padding: sidePadding,
child: Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.deepPurpleAccent,
minimumSize: const Size.fromHeight(50), // NEW
),
child: const Text(
'Next',
style: TextStyle(
fontSize: 18,
),
),
onPressed: () {},
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
//);
}
}
Please help me out with this error I don't know how to fix this
This is what I want
I change the code of
Padding(
padding: sidePadding,
child: Column(
children: <Widget>[
addVerticalSpace(15),
Column(
children: <Widget>[
Expanded(
child: Column(
children: [
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
children: [
Text('one'),
Text('two'),
Text('Three'),
Text('Four'),
],
),
],
),
),
],
),
To
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: GridView(
padding: const EdgeInsets.all(8.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
children: [
Text('one'),
Text('two'),
Text('Three'),
Text('Four'),
],
),
),
],
),
)
),
But now it shows another error
image of another error

Use Padding widget as child on Expanded.
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView(....)
You can also use GridView's padding:. If you want to have multiple column wrap Column and GridView with Expanded.
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: GridView(
padding: const EdgeInsets.all(8.0),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
children: [ .....

How to fix this Error Unexpected null value?

I am getting the following error while rendering in my FutureBuilder:
======== Exception caught by rendering library =====================================================
The following TypeErrorImpl was thrown during paint(): Unexpected null value.
Here is my code:
file1.dart
DataCell(IconButton(
icon: Icon(Icons.info_outline),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return VendorDetailBox(document.data()['uid']);
});
},
)),
]);
file.dart
Widget build(BuildContext context) {
return FutureBuilder(
future: _services.vendors.doc(widget.uid).get(),
builder:
(BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError) {
return Center(child: Text('Something Went Wrong'));
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
return Dialog(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width * .3,
child: ListView(children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 100,
width: 100,
child: Image.network(
snapshot.data['url'],
fit: BoxFit.cover,
),
),
ListView(children: [
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
snapshot.data['name'],
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
Text(
snapshot.data['dialog'],
),
]),
]),
],
),
Divider(
thickness: 4,
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child: Text("Contact Numbers",
style: VendorDetailTextStyle),
),
),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['mobile']),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child: Text("Email", style: VendorDetailTextStyle),
)),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['email']),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child:
Text("address", style: VendorDetailTextStyle),
)),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['address']),
),
),
],
),
),
// Padding(
// padding: const EdgeInsets.only(top: 10.0),
// child: Row(
// children: [
// Expanded(
// child: Container(
// child: Text("Created At",
// style: VendorDetailTextStyle),
// )),
// Container(
// child: Padding(
// padding:
// const EdgeInsets.only(left: 10.0, right: 10),
// child: Text(':'),
// ),
// ),
// Expanded(
// child: Container(
// child:
// Text(snapshot.data['Created At'].toString()),
// ),
// ),
// ],
// ),
// ),
],
),
]),
),
);
});
}

Error displaying List view below container

I am trying to display Listview using Listview builder below the purple color(as seen in the image)container with the below code:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
);
It returns a blank screen after running the code,without showing any error. I am not able to figure out the problem.
Please help!

If you use listview is small and inside Column then you should add
shrinkWrap: true in ListView
Column(
children: <Widget>[
ListView(
shrinkWrap: true, // use it
)
],
)
Or If your ListView Height is fix then use
Column(
children: <Widget>[
SizedBox(
height: 200, // constrain height
child: ListView(),
)
],
)
or If you want to fill all remaining space the use
Column(
children: <Widget>[
Expanded(
child: ListView(...),
)
],
)

Simply wrap the ListView in Expanded. The error here is that ListView doesn't know how to size itself (it has unbounded height from the Column). Using Expanded will tell it to fill up all the remaining space and fix the sizing problem
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: Expanded( // <-- wrap with expanded
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
),
)
],
),
);

Error is caused by Container that is wrapping ListView. You need to specify bounds for that Container.
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(
icon: Icon(
Icons.arrow_back,
),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(
height: 20,
),
Text(
'Semester 1',
style: TextStyle(color: Colors.white, fontSize: 30),
)
],
),
),
Container(
height: 300,
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Container(
child: Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
Above code should be working. Please note that, you don't need to specify "new" keyword in flutter.