AI prompts
base on A Flutter widget for creating fully custom, animated scrollable lists. It manages all of the tricky logic surrounding scroll interactions and physics, and leaves the visual presentation of items up to you.
Flutter Custom Carousel
================================================================================
A widget for creating fully custom, animated scrollable lists. It manages all of
the tricky logic surrounding scroll interactions and physics, and leaves the
visual presentation of items up to you.
<img src='https://github.com/gskinnerTeam/flutter_custom_carousel/blob/assets/readme_example.gif?raw=true' style='width: 100%'>
Includes an example app (shown above) with a variety of commented demos to learn
from or customize.
Platforms / devices
================================================================================
Currently, this widget is designed for touch input. On desktop, scroll wheel
input can fight with the settling scroll physics. Specifying different `physics`
can resolve this at the cost of settling (aka snapping).
You can also enable scrolling via mouse dragging on desktop by setting a
`scrollBehavior`. Check `main.dart` in the example to see it in use.
Similarly, the included examples target mobile handsets in portrait view to keep
them concise. They include only basic responsiveness.
Basics
================================================================================
Simply pass in a list of children, and define an `effectsBuilder` function.
`effectsBuilder` accepts a child and its current relative scroll position (see
**scrollRatio** below), and returns the child wrapped with widgets that apply
the desired effects.
``` dart
// very basic example that scrolls children vertically from -250px to +250px
CustomCarousel(
children: [card1, card2, etc],
effectsBuilder: (index, scrollRatio, child) =>
Transform.translate(
offset: Offset(0, scrollRatio * 250) ,
child: child
),
)
```
You can further refine visuals by specifying how many children to display before
and after the selection, whether to loop the list, a default alignment, and how
to depth sort children.
Adjust interactions by changing the scroll direction, physics, & speed, enabling
tap to select, or specifying handlers for when the selected item changes, or
when it settles into position.
scrollRatio
----------------------------------------
The `scrollRatio` value ranges from -1 to +1, where 0 is the settled position of
the selected item.
The following animation displays the `scrollRatio` for each item as it scrolls.
It also highlights the "selected" item (white background), and the "settled"
item (thick outline).
<img src='https://github.com/gskinnerTeam/flutter_custom_carousel/blob/assets/readme_scrollratio.gif?raw=true' style='width: 100%'>
Try watching a single item at a time to see how the ratio relates to selection,
settling, and items entering / exiting the visible list. Note that the specific
values are dependent on factors like `itemsBefore` / `itemsAfter`.
ScrollControllers and ScrollPhysics
----------------------------------------
To facilitate item-oriented navigation and looping content CustomCarousel
requires that you use `CustomCarouselScrollController`. This controller also
provides useful features such as `jumpToItem`, `animateToItem`, `nextItem`, and
`previousItem`, as well as smart defaults for animation durations and curves.
Similarly, CustomCarousel defaults to `CustomCarouselScrollPhysics`, which
enables "settling" onto selected items (aka snapping). Adjust the behavior of
the physics by setting the `sticky` and `stiffness` properties. You can use
other scroll physics (such as `BouncingScrollPhysics`) if you don't want this
functionality.
Using with Flutter Animate
================================================================================
You can also use [Flutter Animate](https://pub.dev/packages/flutter_animate) to
define the `effectsBuilder`, leveraging it's broad collection of effects, such
as fading, moving, blurs, shadows, shimmers, color effects, 2.5d flips, and
more.
For example, the simple vertical scroller from above would look like this:
``` dart
// very basic example that scrolls children vertically from -250px to +250px
CustomCarousel(
children: [card1, card2, etc],
effectsBuilder: CustomCarousel.effectsBuilderFromAnimate(
effects: EffectList().moveY(begin: -250, end: 250),
),
)
```
A number of the included examples demonstrate this approach in more depth. See
the docs for `CustomCarousel.effectsBuilderFromAnimate()` for more info.
API reference
================================================================================
For full documentation, see the
[API reference](https://pub.dev/documentation/flutter_custom_carousel/latest/).
Installation
================================================================================
Grab it from
[pub.dev](https://pub.dev/packages/flutter_custom_carousel/install).", Assign "at most 3 tags" to the expected json: {"id":"9474","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"