Compare commits

..

No commits in common. "master" and "0.3.0" have entirely different histories.

13 changed files with 138 additions and 127 deletions

View file

@ -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

View file

@ -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
View 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
View file

@ -21,7 +21,3 @@ doc/api/
*.js.map *.js.map
.idea .idea
# FVM Version Cache
.fvm/
.fvmrc

View file

@ -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

View file

@ -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,

View file

@ -6,9 +6,6 @@ Each card can change its rotation, position and scale when swiping the cards.
![Carousel GIF](carousel.gif) ![Carousel GIF](carousel.gif)
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.

View 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:

View file

@ -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';

View file

@ -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,15 +84,16 @@ class _CarouselState extends State<Carousel> {
} }
@override @override
Widget build(BuildContext context) => Stack( Widget build(BuildContext context) {
return Stack(
alignment: widget.alignment, alignment: widget.alignment,
children: [ children: [
AnimatedBuilder( AnimatedBuilder(
animation: _pageController, animation: _pageController,
builder: (context, _) { builder: (context, _) {
var transitionPos = _currentPage % 1; final transitionPos = _currentPage % 1;
var index = _currentPage.floor(); final index = _currentPage.floor();
var length = widget.transforms.length - 1; final length = widget.transforms.length - 1;
return Stack( return Stack(
children: [ children: [
@ -117,7 +114,8 @@ class _CarouselState extends State<Carousel> {
scrollBehavior: _MouseSwipeOnWeb(), scrollBehavior: _MouseSwipeOnWeb(),
onPageChanged: widget.onPageChanged, onPageChanged: widget.onPageChanged,
controller: _pageController, controller: _pageController,
itemBuilder: (context, index) => Visibility( itemBuilder: (context, index) {
return Visibility(
visible: false, visible: false,
maintainState: true, maintainState: true,
maintainAnimation: true, maintainAnimation: true,
@ -137,12 +135,14 @@ class _CarouselState extends State<Carousel> {
), ),
], ],
), ),
), );
},
), ),
), ),
], ],
); );
} }
}
class _MouseSwipeOnWeb extends MaterialScrollBehavior { class _MouseSwipeOnWeb extends MaterialScrollBehavior {
@override @override

View file

@ -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);

View file

@ -10,14 +10,15 @@ 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) {
return Transform.translate(
offset: Offset(cardTransform.x, cardTransform.y), offset: Offset(cardTransform.x, cardTransform.y),
child: Transform.rotate( child: Transform.rotate(
angle: cardTransform.angle, angle: cardTransform.angle,
@ -31,3 +32,4 @@ class CarouselCard extends StatelessWidget {
), ),
); );
} }
}

View file

@ -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