i am trying to align list view items at the top left, but it aligns them in the center. I tried this with another widget, it works fine, but with the listview, it doesn't.
here is my code
Container(
height: height * 30,
// color: Colors.grey[400],
alignment: Alignment.topLeft,
child: ListView.builder(
itemBuilder: (context, i) => ReviewItem(
review: book.reviews[i]['review'],
date: book.reviews[i]['date'],
),
itemCount: book.reviews.length,
),
),
this is the review item
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
timeago.format(DateTime.parse(date)),
style: Theme.of(context).textTheme.headline4.copyWith(
fontSize: width * kFont12Ratio, color: Colors.grey[500]),
),
SizedBox(height: height * 0.5),
Text(review),
Divider(),
],
);
Thanks in advance
By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. In other words, if you put a widget before the ListView, you should wrap the ListView with a MediaQuery.removePadding widget (with removeTop: true). Like so:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(...),
);
I achieved that by adding padding inside the listview builder
padding: EdgeInsets.only(top: 0),
You can use padding instead
Or use Stack with Position (top:0,left:0)
Or use Align( )
Related
I have a list of days, and a list of opening hours for each day.
I need to make the list of days scrollable, and the list of opening hours expands as necessary (= I don't want the list of opening hours to be scrollable into a defined height container).
How to make the list scrollable ?
Here is what I have so far, a list of days that is not scrollable (and I can't see sunday) :
SingleChildScrollView(
child: ListView.builder(
itemCount: _days.length,
itemBuilder: (context, i) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(18.0),
child: Text(_days[i],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[700]))),
Container(
decoration: BoxDecoration(color: Colors.white),
child: ListView.builder(
shrinkWrap: true,
itemCount: _daysDispos[i].length,
itemBuilder: (context, j) {
final dispo = _daysDispos[i][j];
return ListTile(
title: Text(dispo.address.line));
}),
)
],
);
})),
EDIT
In the first listView builder, add :
physics: NeverScrollableScrollPhysics()
Solved my issue.
A good solution would be using Expandable package, and add multiple Expandables inside a single ListView.
Another Solution would be replacing the outer ScrollView with one single ListView, whose Childs will be 7 Columns, each column contains a group of opening hours.
You can try CustomScrollView with multiple SliverLists for your purposes instead of using SingleChildScrollView:
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
],
);
}
I have a horizontal ListView and depending on the app state, there might be 1-2 items in the list or many.
Now, I want to have the items centered as long as there are only a few available and scrolling is not needed. So far my items always stick to the left side as you can see in the ListView with the lime background color. That one I wanted centered, even if 2 or 3 items are visible, but with more, it shall scroll and then start at the left side with listing the items.
return Container(
color: Colors.lime,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: listItems));
the items itself are this:
Widget getPersonCircleWidget(BuildContext context, Person p) {
return Container(
color: Colors.transparent, //yellow,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: CircularProfileAvatar('',
child: Image(
fit: BoxFit.cover,
image:
UserPhotoManager.singleton.getUserProfilePhoto(p.userId)),
borderColor: colorCirclePhotoBorder,
borderWidth: 2,
elevation: 10,
radius: 40,
onTap: () {
....
}),
),
);
}
Any idea how to solve this?
Just wrap your ListView with Center widget.
Center(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: listItems.map<Widget>((a) => CircleAvatar(
child: Text(a))).toList(),
),
),
When ListView exceed available room on the screen it will automatically left aligned.
Try it on dartpad.
I'm building out an app in flutter and I want to display a few cards in a list-view. The problems I'm facing are the following:
I get a text-overflow when I have Text widgets in a column.I semi-fixed this by wrapping the Text widget in an Expanded widget, but it looks a bit cutoff (ex. "Question: How do you do problem 2?" (refer to picture below)).
I want to build a larger card with a greater height and more room/white space. I've tried wrapping my column widget in a container and set the height manually, but that doesn't seem to do anything.
Here is what the card looks like right now:
Relevant code shown below:
itemBuilder: (context, index) => snapshot
.data.metadata.isFromCache
? _buildListItem(context,
snapshot.data.documents[index])
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
return document.data['didProblems']
? Card(
child: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('${document.data['fullName'].toString()}'),
SizedBox(
height: 5.0,
),
Text('HW Assignment: ${document.data['title'].toString()}'),
SizedBox(
height: 5.0,
),
Text('Problems attempted: ${document.data['problems']}'),
Expanded(child: Text('Question: ${document.data['question'].toString()}'), flex: 1,),
],
),
),
),
)
Any help is appreciated. Thanks in advance!
if u r using listview then set itemExtent property to ur convenience e.g.
ListView.builder(
itemCount: 10,
itemBuilder: (_, int index) => YourWidget(),
itemExtent: 150,
),
Even after wrapping your text in an Expanded you have to set overflow to TextOverflow.clip
Try this
Expanded(child: Text('Question: ${document.data['question'].toString()}', overflow: TextOverflow.clip), flex:1,),
I have a page with container + listView. Now the listView is scrollable, but I would like the whole page to be scrollable. (so if the user scrolls, the container goes 'away')
Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
children: posts,
),
],
),
Is this possible, and how can it be achieved?
Thanks!
You can wrap the whole page with a SingleChildScrollView
here is an example:
SingleChildScrollView( // <- added
child: Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
shrinkWrap: true, // <- added
primary: false, // <- added
children: posts,
),
],
),
);
for more info about see this question
What if you don't use Column and use ListView.builder and
according to indexes you show the widget.
For example on 0 index you show the Container.
This way you don't have to use any different widget for scrolling
and as per your requirement the container will scroll with the list.
This way there is no chance that you will get any overflow error
like you were getting while using Column.
Plus point of ListView.builder is that your posts will be created lazily and that is efficient way of creating ListView in Flutter. No matter how many posts you have your UI will not lag.
This at first may look like a hack but according to your requirement that the container must also be able to get scrolled, this solution makes sense to me because Container can be considered as a first element of the list.
Let me know if it works for you or not.
Following is the working code for your reference:
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: posts.length + 1, // +1 because you are showing one extra widget.
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text(""));
}
int numberOfExtraWidget = 1; // here we have 1 ExtraWidget i.e Container.
index = index - numberOfExtraWidget; // index of actual post.
return posts[index];
},
);
}
I hope this works for you, in case of any doubt please comment.
There are multiple ways you can achieve what you want. The only problem is that if you have large number of posts, listview with children posts, as shrinkWrap is set to true, will take time to calculate its required height, for that it will have to populate all of its children.
First
ListView(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
physics: NeverScrollableScrollPhysics(),
primary: false,
shrinkWrap: true,
children: posts,
),
),
],
),
Second
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
children: posts,
),
],
),
),
use SingleChildScrollView then Container with hard coded container height, then list view builder, that should fix your issue.
I tried the following:
SingleChildScrollView(
child: Container(
height: 1000,
width: 400,
child: ListView(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
children: posts,
),
],
),
),
),
This works, but I would like that the container has a dynamic height and width? Is that possible? Thanks!
I want to make a ScrollView that contains some widget and also items from ListView Builder. However they should all scroll together (like part of one list) , which seems difficult since ListView Builder has its own scrolling behaviour and will create conflict. How can i resolve this ?
Column tiles = Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0, bottom: 14.0, left: 20.0, right: 20.0 ),
child: Row(
....// Other Row Widgets I want to scroll
),
),
Expanded(
child: FutureBuilder(
future: getAllTiles,
initialData: [],
builder: (context, snapshot) {
//returns ListView Builder
}),
),
],
);
Try using the spread operator
ListView(
children: [
DrawerHeader(...),
..._buildUserGroups(context),
ListTile(...)
],
),```
Note: this is available only in Dart>2.2