I am trying to finish my first flutter app
it is a Quran app, and i was able so far to fetch and show the data in page view, each page has list view which contains the data depending on user selection, so one listview can be very long
in the list view there is a list of rich texts, each containing textspans,
here is the code
PageView.builder(
controller: _pageController,
itemCount: ConstantsHelper.selectionCount[widget.args.type],
scrollDirection: Axis.horizontal,
reverse: true,
itemBuilder: (context, index) => StreamBuilder<Object>(
stream: null,
builder: (context, snapshot) {
return FutureBuilder(
future: Provider.of<QuranProvider>(context)
.getSelection(widget.args.type, index + 1),
builder: (context, snapshot) =>
snapshot.connectionState == ConnectionState.waiting
? CircularProgressIndicator()
: ListView.builder(
itemCount: 1,
scrollDirection: Axis.vertical,
itemBuilder: (ctx, index) => Column(
children: WidgetHelper().getContent(
Provider.of<QuranProvider>(context)
.ayas,
context),
),
),
);
},
),
),
basically this is how the app looks like
one rich text can be so long that it requires lots of scrolling and can take the entire page
now, what I need to do, is getting the scrolling position, so when the user opens the app, the app will automatically scroll to the correct page and line
the page part is already done, however, when I try to implement the scrollController I get error ScrollController attached to multiple scroll views
I tried to set a listener in initstate to the scroll listener, the problem is that i am not sure where to add the controller and the listener
the controller.position doesnt change when i scroll, which is not useful.
so, how can I listen to the scrolling position change with a pageview parent?
Related
I have a list view that displays the data fetched from the API. And I'd use the pull_to_refresh_flutter3 package to refresh the page when the page dragged upwards. It was working fine On the mobile. Now I want to implement it on the web. When the user scrolls to the bottom, the RefreshIndicator() should be triggered. How do I achieve this?
SmartRefresher(
controller: homeViewModel.refreshRequestedTask,
enablePullDown: false,
enablePullUp: true,
footer: const ClassicFooter(
loadStyle: LoadStyle.ShowWhenLoading,
),
onLoading: () => homeViewModel.loadMoreRequestedTask(),
child: ListView.builder(
shrinkWrap: true,
itemCount: homeViewModel.taskList.length,
itemBuilder: (BuildContext context, int index) {
return TaskCardView(
taskList: homeViewModel.taskList,
index: index,
);
},
),
),
You can FutureBuilder to work smooth with RefreshIndicator .
OR you can use use StreamBuilder which automatically update app when changes occur.
You just have to return ListView.builder in builder: property
My question is very simple but I did not find a result.
In a ListView.builder (with horizontal scroll) for example if there are 5 elements the user can scroll them all at once. I would like that the user can scroll only 1 by 1.
In short I would like the animation of the list to stop at each element.
Example of my list :
Widget _list()
{
return ListView.builder(
physics: const ClampingScrollPhysics(),
scrollDirection: _horizontalDisplay? Axis.horizontal : Axis.vertical,
itemCount: data!.length,
itemBuilder: (context, index)
{
return widgetToDisplay(index);
}
);
}
The ListView.builder can't make it, you need to use carousel_slider package
I was wondering if anyone had an issue where they use a ListView.builder() and then it doesn't want to scroll
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: widget.product.category.length,
itemBuilder: (context, index) {
final item = widget.product.category[index];
return ListTile(title: Text(item));
},
)
I'd suggest you do the following:
Remove shrinkWrap and make sure the value passed to itemCount is large enough to make the widget scroll.
If you place the list view inside a vertically scrolling list, it's not going to scroll... In this case, you should probably be using slivers
I'm trying to make a feed where once the users uploads a post, the post gets added to the top of the feed and the user can see the post they just made. Right now I have a ChangeNotifierProvider and Consumer that is getting newly updated data from my view model. Inside the ChangeNotifierProvider, I have a pageview.builder. How would I get the pageview.builder to refresh pages so that the users post is now shown? I have tried using the onPageJumped but I can't use that inside the ChangeNotifier.
Widget _buildScreen(VideoPlayerViewModel viewModel) {
return ChangeNotifierProvider<VideoPlayerViewModel>(
create: (context) => viewModel,
child: Consumer<VideoPlayerViewModel>(
builder: (context, model, child) => PageView.builder(
controller: pageController,
scrollDirection: Axis.vertical,
itemCount: videoPlayerViewModel.intialVideoDataLength,
itemBuilder: (BuildContext context, int index) {
var data = videoPlayerViewModel.intialVideoData;
return VideoScaffoldWidget(videoData: data[index]);
})));
}
Try adding unique key to the PageView, it should do the trick
PageView.builder(
key: UniqueKey(),
This is my code. Here, I have used Listview.builder due to which whole data is displayed in 1 tablecell. What should I use at place of listview to display the data properly in different cells.
Or Any other way to display data dynamically from backend?
TableRow(children: [
TableCell(
child: FutureBuilder(
future: fetchProducts(),
builder: (context, snapshot){
if(snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, index){
Products product = snapshot.data[index];
return Text(//"Name :- "
'${product.pname}', style: TextStyle(fontSize: 15));
});
}},
)),]),
In place of tablerow use DataTable, it will automatically size itself, it has column and row children so its probably the best way to display your data, check this youtube vide out
https://www.youtube.com/watch?v=ktTajqbhIcY&vl=en