In my book-like Flutter app, there is a requirement to swipe in horizontal direction in order to navigate to previous and next page. I looked for a package which does something like that in pub.dev and didn't find. I'd like to know if there is already something like that to not-invent a wheel. If not, I'd like to hear (not excepting you to make it for me) what approach can be taken in order to implement it by myself.
What you're looking for is the PageView widget. Just provide the pages, the swiping functionality is built-in.
PageView(
controller: _controller,
children: [
MyPage1Widget(),
MyPage2Widget(),
MyPage3Widget(),
],
)
Since you're saying it's for a book which likely has a lot of pages you might want to use PageView.builder() instead of better performance.
There's a more information about the widget here
Related
I am trying to animate many widgets such as Text(), Image.asset() and other stuff when they are visible. I tried multiple libraries for checking visibilty of Widgets inside a SingleChildScrollView() but all solutions were either very complicated or it takes a lot of coding to achieve it for multiple widgets. The question that is most similar to mine is this, but it is simple for one or two widgets, but it will be messy for many Widgets. Can someone help me in achieving this requirement?
Edit:
I found that 'flutter_animate' depends on controllers, such as ScrollController, but no documentation about it was mentioned.
enter link description here
I'm working on a custom calendar package but I'm having some performance difficulties while doing that.
My calendar layout is built from PageViews and each pageview contains a Gridview and each GridView contains 42 children representing the days of the month. Like this:-
Issue -
The problem is with scrolling the pageview. When I scroll to the new PageView the new PageView gets build and it builds its GridView and GridView builds its Children. All these tasks while scrolling leads to jank in scrolling animation.
Note: Scrolling to previous PageViews is smooth because I'm using AutomaticKeepAlives in PageView which stops PageView from rebuilding constantly on scroll.
DartPad -
The example DartPad for the above calendar can be found here - https://dartpad.dev/?id=762d835c5b9acadd785ee9269294c1e6
Now, what I'm looking for are the ways through which I can improve its performance.
Maybe I can somehow reuse the components for GridView children's dates by manually caching them by storing them as fields somewhere. But I don't know if that would work as these date styles have non-constant properties like the trailing one has different colors and the general one has a different one.
Maybe I can somehow preload pageviews in advance? I don't know if that would work when swiping fast.
Also, if it matters, currently I'm using Riverpod in my package for managing the calendar state.
So, if there is any way to improve the performance then please help me with that.
Current dirty solutions I found to this problem are:-
Setting viewportFraction: 0.99 in PageController of PageView. (It will help as it preloads the previous page and forward page). Suggested here #504337877.
Or use this preload_page_view package. Suggested here #636388237.
Currently, flutter doesn't support pre caching the PageView pages in advance but there are several issues about it on Github like this - #31191 , #45632 , and a closed pull request #42107 due to IOS related issue.
I failed to reuse the same widget in multiple places without rebuilding them.
And even if I succeed with the above I might fail to reuse states of child widgets of PageView as changing Pages means the whole child of PageView to be rebuilt as the index is new. So I cannot cache child widgets until I can reuse states in PageView.builder and GridView.Builder. A similar case for ListView is described in #49126.
If I'm wrong about the reusing same widget at multiple places then please correct me with a working small example as I'm more than happy to learn more. You can use this DartPad as starting point. The task is to bring the rebuild of customContainer from 42 to 1.
Not accepted as an answer as there could be more great answers to this in the future.
I am using flutter for my app.
I have a TabBarView that I would loop as shown as below.
TabBarView(
controller: controller,
children: visibleTab
.map((e) =>
TabDataWidget(
data: e,
)
).toList(),
);
Each Tab would be populated by the TabDataWidget (as shown above).
I have a Floating button, that I wanted to trigger a function inside the TabDataWidget when the user click at the Floating button.
If the user scroll to Tab Index 1, when the user clicks at the Floating button, I wanted to call a function inside TabDataWidget to process data inside Tab Index 1. Similarly, if the user scrolls to Tab Index 2, when the user clicks at the Floating button, I wanted to call a function inside TabDataWidet.
How can I achieve this in Flutter?
It seems like you need a state management solution as you want to access your data/methods from several widgets. Having a widget calling another widget's function to change state is not recommended as it can get messy and difficult to manage your state. Instead you should lift your state up in the hierarchy and use this state across the widgets you want. Flutter Docs have a great article that explains how you can approach state management. Different solutions exist but you might have a look at the provider package. Also there is a useful talk by the Flutter team explaining common anti patterns and how provider can help to overcome these.
I have stucked with an issue learning Flutter. I take a design from dribbble and try to implement it. The goal is to implement a horizontal scrollable list view but I want it to appear with padding and when I scroll it left it goes over the screen (see attachments). When I scroll left the items of the list should goes over the screen without padding. I tried to add empty sized box as first item of the list but it looks like incorrect approach. I am sure I am doing something wrong and it would be helpful if some one steer me in the right direction. .
ListView has a padding property you can use that.
ListView(
padding:EdgeInsets.only(left:10),
...
),
Hope this is what you are looking for.
Following are the question which needs to be answered?
1.How to set inset border in Flutter.(already tried Border() but no inset option)
2.How to remove Material statelesswidget from index class. I know that stateful widget and stateless widget both are in the material library.but I need another way through which I can display normal layout without using the stateless or stateful widget.
3.Currently, Flutter doesn't support SVG. is there any other way to put SVG in the layout.
I realize this isn't the best question - in the future try to ask 3 separate questions... but I'm going to answer it as best I can anyways.
1) I'm assuming you mean you want to inset your inner class. There are a few ways to do this, but the easiest is probably to use a container. This shows the inset types (similar-ish to how it works in HTML):
new Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.blueAccent)
),
child: ...,
)
2) I don't really understand the question. You don't technically need Stateful & Stateless widgets to be able to make a flutter app - you can simply return a cascade of objects from runApp in your main function... but if you want to display any data or basically do anything, you need to define your own widgets.
The provided widgets are the basic building blocks of a flutter application; they contain logic for layout and rendering in their implementations, whereas your own widgets can almost exclusively use the provided widgets rather than having to understand how that all works. But to keep track of your app's state, you need stateful widgets, and to encapsulate a set of widgets a stateful widget helps a lot! You generally end up with a very nested structure in flutter (which it is optimized for) - a different paradigm from some other frameworks and languages that instead use XML or a structure markup language - but using stateless widgets can help to keep the nesting to a reasonable size.
I highly recommend following the flutter codelab and the other tutorials etc on the flutter.io website as they will show you the basics.
3) Unfortunately, flutter doesn't support SVGs at the moment although there is some discussion on github about supporting them in the future.
I've utilized some vectors in my project by using a CustomPainter + canvas and converting the path/circle/lines to drawCircle, drawPath, drawLine. I've a semi-automated tool for doing that but it's pretty hacky and so not worth releasing at this point. Eventually I'd like to make it into a plugin but that won't be any time soon....