mirror of
https://github.com/Iconica-Development/flutter_carousel.git
synced 2025-05-20 12:43:45 +02:00
Compare commits
No commits in common. "master" and "0.3.0" have entirely different histories.
13 changed files with 138 additions and 127 deletions
14
.github/workflows/component-ci.yml
vendored
14
.github/workflows/component-ci.yml
vendored
|
@ -1,14 +0,0 @@
|
||||||
name: Iconica Standard Component CI Workflow
|
|
||||||
# Workflow Caller version: 2.0.0
|
|
||||||
|
|
||||||
on:
|
|
||||||
pull_request:
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
call-global-iconica-workflow:
|
|
||||||
uses: Iconica-Development/.github/.github/workflows/component-ci.yml@master
|
|
||||||
secrets: inherit
|
|
||||||
permissions: write-all
|
|
||||||
with:
|
|
||||||
subfolder: "." # add optional subfolder to run workflow in
|
|
14
.github/workflows/component-documentation.yml
vendored
14
.github/workflows/component-documentation.yml
vendored
|
@ -1,14 +0,0 @@
|
||||||
name: Iconica Standard Component Documentation Workflow
|
|
||||||
# Workflow Caller version: 1.0.0
|
|
||||||
|
|
||||||
on:
|
|
||||||
release:
|
|
||||||
types: [published]
|
|
||||||
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
call-iconica-component-documentation-workflow:
|
|
||||||
uses: Iconica-Development/.github/.github/workflows/component-documentation.yml@master
|
|
||||||
secrets: inherit
|
|
||||||
permissions: write-all
|
|
32
.github/workflows/flutter.yml
vendored
Normal file
32
.github/workflows/flutter.yml
vendored
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
name: CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ master ]
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
- feature/*
|
||||||
|
- bugfix/*
|
||||||
|
- hotfix/*
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
lint:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
- uses: actions/cache@v3
|
||||||
|
with:
|
||||||
|
path: |
|
||||||
|
~/.gradle/wrapper
|
||||||
|
/opt/hostedtoolcache/flutter
|
||||||
|
key: ${{ runner.OS }}-flutter-install-cache
|
||||||
|
- uses: subosito/flutter-action@v2
|
||||||
|
with:
|
||||||
|
channel: 'stable'
|
||||||
|
- name: Flutter pub get
|
||||||
|
run: flutter pub get
|
||||||
|
- name: Flutter format
|
||||||
|
run: dart format -o none --set-exit-if-changed .
|
||||||
|
- name: Flutter analyze
|
||||||
|
run: flutter analyze
|
4
.gitignore
vendored
4
.gitignore
vendored
|
@ -21,7 +21,3 @@ doc/api/
|
||||||
*.js.map
|
*.js.map
|
||||||
|
|
||||||
.idea
|
.idea
|
||||||
|
|
||||||
# FVM Version Cache
|
|
||||||
.fvm/
|
|
||||||
.fvmrc
|
|
||||||
|
|
|
@ -1,7 +1,3 @@
|
||||||
## 0.3.1
|
|
||||||
|
|
||||||
* Added Iconica CI and Iconica Linter
|
|
||||||
|
|
||||||
## 0.3.0
|
## 0.3.0
|
||||||
* Added option for backwards infinite scrolling and intial page
|
* Added option for backwards infinite scrolling and intial page
|
||||||
|
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
* Every sort of widget can be animated as a card.
|
|
||||||
* For the animation the following properties can be set between animation frames:
|
|
||||||
this.x = 0,
|
|
||||||
this.y = 0,
|
|
||||||
this.angle = 0,
|
|
||||||
this.scale = 1,
|
|
||||||
this.opacity = 1.0,
|
|
|
@ -6,9 +6,6 @@ Each card can change its rotation, position and scale when swiping the cards.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
Figma Design that defines this component (only accessible for Iconica developers): https://www.figma.com/file/4WkjwynOz5wFeFBRqTHPeP/Iconica-Design-System?type=design&node-id=357%3A3335&mode=design&t=XulkAJNPQ32ARxWh-1
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
To use this package, add `carousel` as a dependency in your pubspec.yaml file.
|
To use this package, add `carousel` as a dependency in your pubspec.yaml file.
|
||||||
|
|
|
@ -1,9 +1 @@
|
||||||
include: package:flutter_iconica_analysis/analysis_options.yaml
|
include: package:flutter_lints/flutter.yaml
|
||||||
|
|
||||||
# Possible to overwrite the rules from the package
|
|
||||||
|
|
||||||
analyzer:
|
|
||||||
exclude:
|
|
||||||
|
|
||||||
linter:
|
|
||||||
rules:
|
|
|
@ -1,7 +1,7 @@
|
||||||
// SPDX-FileCopyrightText: 2022 Iconica
|
// SPDX-FileCopyrightText: 2022 Iconica
|
||||||
//
|
//
|
||||||
// SPDX-License-Identifier: BSD-3-Clause
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
/// A Flutter package for creating a carousel widget.
|
|
||||||
library carousel;
|
library carousel;
|
||||||
|
|
||||||
export 'package:carousel/src/carousel.dart';
|
export 'package:carousel/src/carousel.dart';
|
||||||
|
|
|
@ -11,8 +11,7 @@ typedef CarouselCardBuilder = Widget Function(BuildContext context, int index);
|
||||||
|
|
||||||
class Carousel extends StatefulWidget {
|
class Carousel extends StatefulWidget {
|
||||||
/// Animated cards by swiping.
|
/// Animated cards by swiping.
|
||||||
/// Each card can change its rotation, position
|
/// Each card can change its rotation, position and scale when swiping the cards.
|
||||||
/// and scale when swiping the cards.
|
|
||||||
/// Transform path can be privided using [transforms]
|
/// Transform path can be privided using [transforms]
|
||||||
const Carousel({
|
const Carousel({
|
||||||
required this.transforms,
|
required this.transforms,
|
||||||
|
@ -24,8 +23,8 @@ class Carousel extends StatefulWidget {
|
||||||
this.onCardClick,
|
this.onCardClick,
|
||||||
this.initialPage = 0,
|
this.initialPage = 0,
|
||||||
this.allowInfiniteScrollingBackwards = false,
|
this.allowInfiniteScrollingBackwards = false,
|
||||||
super.key,
|
Key? key,
|
||||||
});
|
}) : super(key: key);
|
||||||
|
|
||||||
/// A list of transforms to calculate the position of the card when swiping.
|
/// A list of transforms to calculate the position of the card when swiping.
|
||||||
/// Every item in the list is one of the possible card positions.
|
/// Every item in the list is one of the possible card positions.
|
||||||
|
@ -34,8 +33,7 @@ class Carousel extends StatefulWidget {
|
||||||
/// The index of the transform card which acts as the selected card.
|
/// The index of the transform card which acts as the selected card.
|
||||||
final int selectableCardId;
|
final int selectableCardId;
|
||||||
|
|
||||||
/// Builder for the card given a [context] and a [index] to
|
/// Builder for the card given a [context] and a [index] to identify the right card.
|
||||||
/// identify the right card.
|
|
||||||
final CarouselCardBuilder builder;
|
final CarouselCardBuilder builder;
|
||||||
|
|
||||||
/// Called when selected card is changed to the next one.
|
/// Called when selected card is changed to the next one.
|
||||||
|
@ -53,9 +51,7 @@ class Carousel extends StatefulWidget {
|
||||||
/// The page to show when first creating the [Carousel].
|
/// The page to show when first creating the [Carousel].
|
||||||
final int initialPage;
|
final int initialPage;
|
||||||
|
|
||||||
/// Whether to allow infinite scrolling backwards. Defaults to false. If true,
|
/// Whether to allow infinite scrolling backwards. Defaults to false. If true, this works by using a very large number of pages (10000). Works in conjunction with [initialPage].
|
||||||
/// this works by using a very large number of pages (10000).
|
|
||||||
/// Works in conjunction with [initialPage].
|
|
||||||
final bool allowInfiniteScrollingBackwards;
|
final bool allowInfiniteScrollingBackwards;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
@ -88,36 +84,38 @@ class _CarouselState extends State<Carousel> {
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) => Stack(
|
Widget build(BuildContext context) {
|
||||||
alignment: widget.alignment,
|
return Stack(
|
||||||
children: [
|
alignment: widget.alignment,
|
||||||
AnimatedBuilder(
|
children: [
|
||||||
animation: _pageController,
|
AnimatedBuilder(
|
||||||
builder: (context, _) {
|
animation: _pageController,
|
||||||
var transitionPos = _currentPage % 1;
|
builder: (context, _) {
|
||||||
var index = _currentPage.floor();
|
final transitionPos = _currentPage % 1;
|
||||||
var length = widget.transforms.length - 1;
|
final index = _currentPage.floor();
|
||||||
|
final length = widget.transforms.length - 1;
|
||||||
|
|
||||||
return Stack(
|
return Stack(
|
||||||
children: [
|
children: [
|
||||||
for (var i = 0; i < length; i++) ...[
|
for (var i = 0; i < length; i++) ...[
|
||||||
CarouselCard(
|
CarouselCard(
|
||||||
cardTransform: widget.transforms[i]
|
cardTransform: widget.transforms[i]
|
||||||
.transform(widget.transforms[i + 1], transitionPos),
|
.transform(widget.transforms[i + 1], transitionPos),
|
||||||
child: widget.builder.call(context, index - i),
|
child: widget.builder.call(context, index - i),
|
||||||
),
|
),
|
||||||
],
|
|
||||||
],
|
],
|
||||||
);
|
],
|
||||||
},
|
);
|
||||||
),
|
},
|
||||||
SizedBox(
|
),
|
||||||
height: widget.pageViewHeight,
|
SizedBox(
|
||||||
child: PageView.builder(
|
height: widget.pageViewHeight,
|
||||||
scrollBehavior: _MouseSwipeOnWeb(),
|
child: PageView.builder(
|
||||||
onPageChanged: widget.onPageChanged,
|
scrollBehavior: _MouseSwipeOnWeb(),
|
||||||
controller: _pageController,
|
onPageChanged: widget.onPageChanged,
|
||||||
itemBuilder: (context, index) => Visibility(
|
controller: _pageController,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
return Visibility(
|
||||||
visible: false,
|
visible: false,
|
||||||
maintainState: true,
|
maintainState: true,
|
||||||
maintainAnimation: true,
|
maintainAnimation: true,
|
||||||
|
@ -137,11 +135,13 @@ class _CarouselState extends State<Carousel> {
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
);
|
||||||
),
|
},
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
);
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class _MouseSwipeOnWeb extends MaterialScrollBehavior {
|
class _MouseSwipeOnWeb extends MaterialScrollBehavior {
|
||||||
|
|
|
@ -28,14 +28,15 @@ class CardTransform {
|
||||||
/// [transitionPos] is a position value of a swipe for example.
|
/// [transitionPos] is a position value of a swipe for example.
|
||||||
/// [other] is the position, scale, rotation
|
/// [other] is the position, scale, rotation
|
||||||
/// which the current [CardTransform] need to be transformed to.
|
/// which the current [CardTransform] need to be transformed to.
|
||||||
CardTransform transform(CardTransform other, double transitionPos) =>
|
CardTransform transform(CardTransform other, double transitionPos) {
|
||||||
CardTransform(
|
return CardTransform(
|
||||||
x: _transformValue(x, other.x, transitionPos),
|
x: _transformValue(x, other.x, transitionPos),
|
||||||
y: _transformValue(y, other.y, transitionPos),
|
y: _transformValue(y, other.y, transitionPos),
|
||||||
angle: _transformValue(angle, other.angle, transitionPos),
|
angle: _transformValue(angle, other.angle, transitionPos),
|
||||||
scale: _transformValue(scale, other.scale, transitionPos),
|
scale: _transformValue(scale, other.scale, transitionPos),
|
||||||
opacity: _transformValue(opacity, other.opacity, transitionPos),
|
opacity: _transformValue(opacity, other.opacity, transitionPos),
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
double _transformValue(double valueA, double valueB, double transformPos) =>
|
double _transformValue(double valueA, double valueB, double transformPos) =>
|
||||||
valueA - ((valueA - valueB) * transformPos);
|
valueA - ((valueA - valueB) * transformPos);
|
||||||
|
|
|
@ -10,24 +10,26 @@ class CarouselCard extends StatelessWidget {
|
||||||
const CarouselCard({
|
const CarouselCard({
|
||||||
required this.cardTransform,
|
required this.cardTransform,
|
||||||
required this.child,
|
required this.child,
|
||||||
super.key,
|
Key? key,
|
||||||
});
|
}) : super(key: key);
|
||||||
|
|
||||||
final CardTransform cardTransform;
|
final CardTransform cardTransform;
|
||||||
final Widget child;
|
final Widget child;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) => Transform.translate(
|
Widget build(BuildContext context) {
|
||||||
offset: Offset(cardTransform.x, cardTransform.y),
|
return Transform.translate(
|
||||||
child: Transform.rotate(
|
offset: Offset(cardTransform.x, cardTransform.y),
|
||||||
angle: cardTransform.angle,
|
child: Transform.rotate(
|
||||||
child: Transform.scale(
|
angle: cardTransform.angle,
|
||||||
scale: cardTransform.scale,
|
child: Transform.scale(
|
||||||
child: Opacity(
|
scale: cardTransform.scale,
|
||||||
opacity: cardTransform.opacity,
|
child: Opacity(
|
||||||
child: child,
|
opacity: cardTransform.opacity,
|
||||||
),
|
child: child,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
46
pubspec.yaml
46
pubspec.yaml
|
@ -1,11 +1,9 @@
|
||||||
name: carousel
|
name: carousel
|
||||||
description: card carousel
|
description: card carousel
|
||||||
version: 0.3.1
|
version: 0.3.0
|
||||||
|
|
||||||
publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
|
|
||||||
|
|
||||||
environment:
|
environment:
|
||||||
sdk: ">=3.0.0 <4.0.0"
|
sdk: ">=2.17.6 <3.0.0"
|
||||||
flutter: ">=1.17.0"
|
flutter: ">=1.17.0"
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -15,9 +13,41 @@ dependencies:
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
flutter_iconica_analysis:
|
flutter_lints: ^2.0.0
|
||||||
git:
|
|
||||||
url: https://github.com/Iconica-Development/flutter_iconica_analysis
|
|
||||||
ref: 6.0.0
|
|
||||||
|
|
||||||
|
# For information on the generic Dart part of this file, see the
|
||||||
|
# following page: https://dart.dev/tools/pub/pubspec
|
||||||
|
|
||||||
|
# The following section is specific to Flutter packages.
|
||||||
flutter:
|
flutter:
|
||||||
|
|
||||||
|
# To add assets to your package, add an assets section, like this:
|
||||||
|
# assets:
|
||||||
|
# - images/a_dot_burr.jpeg
|
||||||
|
# - images/a_dot_ham.jpeg
|
||||||
|
#
|
||||||
|
# For details regarding assets in packages, see
|
||||||
|
# https://flutter.dev/assets-and-images/#from-packages
|
||||||
|
#
|
||||||
|
# An image asset can refer to one or more resolution-specific "variants", see
|
||||||
|
# https://flutter.dev/assets-and-images/#resolution-aware
|
||||||
|
|
||||||
|
# To add custom fonts to your package, add a fonts section here,
|
||||||
|
# in this "flutter" section. Each entry in this list should have a
|
||||||
|
# "family" key with the font family name, and a "fonts" key with a
|
||||||
|
# list giving the asset and other descriptors for the font. For
|
||||||
|
# example:
|
||||||
|
# fonts:
|
||||||
|
# - family: Schyler
|
||||||
|
# fonts:
|
||||||
|
# - asset: fonts/Schyler-Regular.ttf
|
||||||
|
# - asset: fonts/Schyler-Italic.ttf
|
||||||
|
# style: italic
|
||||||
|
# - family: Trajan Pro
|
||||||
|
# fonts:
|
||||||
|
# - asset: fonts/TrajanPro.ttf
|
||||||
|
# - asset: fonts/TrajanPro_Bold.ttf
|
||||||
|
# weight: 700
|
||||||
|
#
|
||||||
|
# For details regarding fonts in packages, see
|
||||||
|
# https://flutter.dev/custom-fonts/#from-packages
|
||||||
|
|
Loading…
Reference in a new issue