I'm trying to put a Listview inside Tab, here is my script
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10, right: 10),
child: TabBar(
controller: _controller,
onTap: (index) {
setState(() {
_selectedIndex = _controller.index;
});
},
indicatorColor: AppColors.primary,
tabs: [
Tab(
child: Text(
"Menu 1",
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
),
Tab(
child: Text(
"Menu 2",
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
),
Tab(
child: Text(
"Menu 3",
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.all(10),
child: TabBarView(
controller: _controller,
children: [
Column(
children: [
Expanded(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 1000,
itemBuilder: (context, index) {
return ListTile(
title: Text(index.toString()),
);
},
),
),
],
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
],
),
),
],
),);
As you can i see in tab 1 , i'm trying to create list with 1000 item counts. But the result it is stuck to list number 14.
How can i fix it ? thanks in advance and sorry for my english
You have used "NeverScrollableScrollPhysics". This disables the scroll property.
Use "AlwaysScrollableScrollPhysics" instead, then you will be able to scroll.
You need remove this line from the ListView.builder():
physics: NeverScrollableScrollPhysics(),
to allow scrolling
Related
I have been trying to find a way to keep two text widgets apart but the problem was that if I used Spacer() or mainAxisAlignment: MainAxisAlignment.spaceBetween the text goes outside the alignment of the other widgets
desired layout vs current layout
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
child: Column(children: [
Text(
'Notes Made',
textAlign: TextAlign.left,
style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Accordion(
color: 0xffE69AF2,
title: receiptData.getVisitType(),
content: receiptData.getVisitDesc(),
),
Accordion(
color: 0xff9AF2AE,
title: 'Doctor\'s Notes',
content: receiptData.getDoctorNotes(),
),
Text(
'Receipt',
textAlign: TextAlign.left,
style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text(
'consultation fee:',
),
),
Container(
child: Text(
receiptData.getCFees().toString(),
),
),
],
),
RatingBar.builder(
initialRating: receiptData.getRating(),
ignoreGestures: true,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(receiptData.getRating());
},
),
]),
),
You could try wrapping each text widget in a container and setting the width of each container to a specific value.
Container(
width: 50.0, // container width
child: Text(
'Text 1',
),
),
Container(
width: 50.0,
child: Text(
'Text 2',
),
),
Additionally you could try wrapping both text widgets in a Row widget and set the mainAxisSize property to MainAxisSize.min. This will force the row to shrink-wrap the text widgets, allowing you to control the space between them by setting the mainAxisAlignment property to MainAxisAlignment.spaceBetween
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Text 1'),
Text('Text 2'),
],
),
I have a ListView and I want to display the items in my custom list tile, the problem is that my text oveflow the tile, i want to add TextOverflow.ellipsis but it doesn't work.
Here's my code:
return Expanded(
child: ListView.builder(
itemCount: songss.length,
itemBuilder: (context, index) {
Song song = songss[index];
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: kPrimaryColor))),
margin: const EdgeInsets.only(left: 16.0),
child: InkWell(
child: Column(
children: <Widget>[
SizedBox(height: 12.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text("${index + 1}",
style: Theme.of(context).textTheme.subtitle2),
SizedBox(width: 16.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
style: Theme.of(context).textTheme.subtitle1,
overflow: TextOverflow.ellipsis, //Here i want to handle overflow
),
Text(_getSongDuration(song.duration),
style: Theme.of(context).textTheme.subtitle2),
],
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Row(
children: <Widget>[
IconButton(
onPressed: () => null,
icon: Icon(Icons.favorite_border),
),
GestureDetector(
onTapDown: (TapDownDetails details) =>
null,
child: Icon(Icons.more_horiz),
),
],
),
)
],
),
SizedBox(height: 12.0),
],
),
),
);
},
),
);
I tried using expanded and flex but it gives me error.
Do you know how to solve it?
Give height,width to the Parent Widget of Text widget and then wrap Text with Expanded
Your error will be solved as expanded/flex need some max parent size to take space from.
I've actualy managed to solve the problem.
return Expanded(
child: ListView.builder(
itemCount: songss.length,
itemBuilder: (context, index) {
Song song = songss[index];
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: kPrimaryColor))),
margin: const EdgeInsets.only(left: 16.0),
child: InkWell(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("${index + 1}",
style: Theme.of(context).textTheme.subtitle2),
SizedBox(width: 16.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
style: Theme.of(context).textTheme.subtitle1,
overflow: TextOverflow.ellipsis,
),
Text(_getSongDuration(song.duration),
style: Theme.of(context).textTheme.subtitle2),
],
),
),
IconButton(
onPressed: () => null,
icon: Icon(Icons.favorite_border),
),
GestureDetector(
onTapDown: (TapDownDetails details) => null,
child: Icon(Icons.more_horiz),
),
],
),
),
);
},
),
);
I've just rewrote the whole list, removing one or two rows.
So i'm gonna answer the question, thank you for your help tho.
I have a list view that shows all invoices done and I want to show a button when a user taps on the list view. Like this:
I'm new in flutter .. if anyone have a sample
thanks very much.
final sales = new Container(
height: 500,
color: Colors.white,
alignment: Alignment.center,
child: ListView.builder(
scrollDirection: Axis.vertical,
// physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: salesr == null ? 0 : salesr.length,
padding: EdgeInsets.all(2.0),
itemBuilder: (BuildContext context, int index) {
return
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide()),
),
child: ListTile(
title: new Text(
"# " + salesr[index]["outgoing_code"],
style: new TextStyle(fontSize: 16.0, color: Colors.green),
),
subtitle: new Text(
salesr[index]["customer_name"],
style: new TextStyle(fontSize: 14.0),
),
trailing: new Text(
salesr[index]["outgoing_totalAll"],
style: new TextStyle(
fontStyle: FontStyle.normal,
color: Colors.red,
fontSize: 16.0),
),
onTap: () {
print(salesr[index]["customer_name"]);
}));
},
));
You can use Visibility to expand or collapse listview.
Here is a sample code that I did for you:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
height: 500,
color: Colors.white,
alignment: Alignment.center,
child: ListView.builder(
scrollDirection: Axis.vertical,
// physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: salesr == null ? 0 : salesr.length,
padding: EdgeInsets.all(2.0),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
if (selected != salesr[index])
selected = salesr[index];
else
selected = null;
});
},
child: Column(
children: [
Row(
children: [
CircleAvatar(
child: Center(
child: Text(
salesr[index][0].toUpperCase(),
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
width: 8,
),
Expanded(child: Text(salesr[index])),
],
),
Visibility(
visible: selected == salesr[index],
child: Row(
children: [
Expanded(
child: IconButton(
icon: Row(
children: [
Icon(Icons.info),
Row(
children: [
Text('Details'),
],
)
],
),
onPressed: () {},
),
),
Expanded(
child: IconButton(
icon: Row(
children: [
Icon(Icons.message),
Row(
children: [
Text('All Invoices'),
],
)
],
),
onPressed: () {},
),
),
],
),
),
Divider(),
],
),
);
},
),
),
);
}
I have implemented tab layout which consists of two tabs, each tab view has a listview, container with tabview & listview should occupy space upto bottom as of now i place static value of 400, so only up to 400 the listview appears, i need the list view to be appeared up to bottom. can you please me to fix this
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'ABC',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'XYZ',
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
height: 400.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
],
),
),
),
],
),
);
}
I have Used Expanded & Flex Widgets which solved the problem
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'Current Openings',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'Applied Jobs',
),
],
),
),
),
flex: 1,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0,bottom: 10.0),
child: Container(
color: Colors.white,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
],
),
),
),
flex: 9,
),
],
),
);
}
I'm trying to create a ListView with Card widget.
I have the ListView and the Card but I can't figure out how to place widgets correctly inside the Card itself. This is how it looks now:
I want the favorites icon and the image to keep their place, but to move the text to be near the image and to have the "Jean-Paul-Gaultier" text to be closer to the "Le Male" and have it align left.
This is what I have so far:
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index){
return Card(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network('${decoded[index]['image']}'),
),
],
),
SizedBox(width: 8,),
Column(
children: <Widget>[
Text(
'${decoded[index]['name']}',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
Row(
children: <Widget>[
Text(
'${decoded[index]['brand']}',
style: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.normal,
fontSize: 12,
),
),
],
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(Icons.favorite_border),
),
],
),
],
),
);
},
);
}
Without the mainAxisAlignment: MainAxisAlignment.space-between the text is indeed closer to the image, but the favorites icon gets right near the text which is something I do not want.
I tried to search for answers but as I'm new to Flutter I don't really know the right keywords so I couldn't find anything.
A much easier approach would be using a ListTile
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text("title"),
subtitle: Text("subtitle"),
leading: Container(
width: 48, height: 48,
child: Placeholder(), //place image here replacing the Placeholder widget
),
trailing: IconButton(
icon: Icon(Icons.favorite_border),
onPressed: () {},
),
),
);
},
);
}
which gives us
But if you want your code then here it is
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.all(8.0),
child: Placeholder(),
width: 48,
height: 48,
),
SizedBox(
width: 8,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'title',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
Text(
'subtitle',
style: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.normal,
fontSize: 12,
),
),
],
),
Spacer(),
IconButton(
icon: Icon(Icons.favorite_border),
onPressed: () {},
),
],
),
);
},
);
}
EDIT
to reduce the space between title and subtitle replace the title with following code
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("title",style: Theme.of(context).textTheme.body2,),
Text("subtitle",style: Theme.of(context).textTheme.caption,),
],
),