Concentric Transition

A Flutter plugin to create views using Concentric Transition Clipper. Useful for onboarding, page transitions, custom clippers, painters etc.

Inspired by Cuberto - Animated Onboarding Screens

Getting Started

Add this to your pubspec.yaml

dependencies:
concentric_transition: ^1.0.1

Get the package from Pub:
```
flutter packages get
```

Import it in your file

import 'package:concentric_transition/concentric_transition.dart';

Features

Concentric PageView
Concentric Clipper
Concentric PageRoute

Usage

Using ConcentricPageView widget

import 'package:concentric_transition/concentric_transition.dart';

ConcentricPageView(
   colors: <Color>[Colors.white, Colors.blue, Colors.red],
   itemCount: 1, // null = infinity
   physics: NeverScrollableScrollPhysics(),
   itemBuilder: (int index, double value) {
       return Center(
           child: Container(
               child: Text('Page $index'),
           ),
       );
   },
);

Using ConcentricPageRoute widget

Navigator.push(context, ConcentricPageRoute(builder: (ctx) {
  return NextPage();
}));

Using ConcentricClipper widget

import 'package:concentric_transition/concentric_transition.dart';

ClipPath(
  clipper: ConcentricClipper(
    progress: 0.1, // from 0.0 to 1.0
    reverse: false,
    radius: 30.0,
    verticalPosition: 0.82,
  ),
  child: Container(
    color: Colors.green,
  ),
)

Check out the complete Example

Credits

Cuberto - Animated Onboarding Screens

Maintainers

Vlad Korniienko

License

I/flutter ( 9578): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 9578): The following _CastError was thrown building AnimatedBuilder(animation: PageController#5a88a(one
I/flutter ( 9578): client, offset 0.0), dirty, state: _AnimatedState#c220a):
I/flutter ( 9578): Null check operator used on a null value
I/flutter ( 9578): 
I/flutter ( 9578): The relevant error-causing widget was:
I/flutter ( 9578):   AnimatedBuilder
I/flutter ( 9578):   file:///home/praharsh/.pub-cache/hosted/pub.dartlang.org/concentric_transition-0.1.1/lib/page_view.dart:122:20
I/flutter ( 9578): 
I/flutter ( 9578): When the exception was thrown, this was the stack:
I/flutter ( 9578): #0      ScrollPosition.minScrollExtent (package:flutter/src/widgets/scroll_position.dart:136:49)
I/flutter ( 9578): #1      _ConcentricPageViewState.build.<anonymous closure>.<anonymous closure> (package:concentric_transition/page_view.dart:127:48)
I/flutter ( 9578): #2      AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:1466:19)
I/flutter ( 9578): #3      _AnimatedState.build (package:flutter/src/widgets/transitions.dart:174:48)
I/flutter ( 9578): #4      StatefulElement.build (package:flutter/src/widgets/framework.dart:4612:27)
I/flutter ( 9578): #5      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4495:15)
I/flutter ( 9578): #6      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4667:11)
I/flutter ( 9578): #7      Element.rebuild (package:flutter/src/widgets/framework.dart:4189:5)
I/flutter ( 9578): #8      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4474:5)
I/flutter ( 9578): #9      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4658:11)
I/flutter ( 9578): #10     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4469:5)
I/flutter ( 9578): ...     Normal element mounting (33 frames)
I/flutter ( 9578): #43     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
I/flutter ( 9578): #44     Element.updateChild (package:flutter/src/widgets/framework.dart:3306:18)
I/flutter ( 9578): #45     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1229:37)
I/flutter ( 9578): #46     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1214:20)
I/flutter ( 9578): #47     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2647:19)
I/flutter ( 9578): #48     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1207:12)
I/flutter ( 9578): #49     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:349:23)
I/flutter ( 9578): #50     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1894:59)
I/flutter ( 9578): #51     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:915:15)
I/flutter ( 9578): #52     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1894:14)
I/flutter ( 9578): #53     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:338:5)
I/flutter ( 9578): #54     RenderSliverMultiBoxAdaptor.addInitialChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:422:5)
I/flutter ( 9578): #55     RenderSliverFixedExtentBoxAdaptor.performLayout (package:flutter/src/rendering/sliver_fixed_extent_list.dart:205:12)
I/flutter ( 9578): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #57     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:137:12)
I/flutter ( 9578): #58     _RenderSliverFractionalPadding.performLayout (package:flutter/src/widgets/sliver_fill.dart:167:11)
I/flutter ( 9578): #59     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #60     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:512:13)
I/flutter ( 9578): #61     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1570:12)
I/flutter ( 9578): #62     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1479:20)
I/flutter ( 9578): #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #64     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #66     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #67     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #68     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #69     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #70     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #71     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #72     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #73     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #74     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #75     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #76     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #77     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #78     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #79     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:546:11)
I/flutter ( 9578): #80     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #81     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #82     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #83     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:54:11)
I/flutter ( 9578): #84     RenderStack._computeSize (package:flutter/src/rendering/stack.dart:570:43)
I/flutter ( 9578): #85     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:597:12)
I/flutter ( 9578): #86     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #87     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #88     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #89     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #90     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1371:11)
I/flutter ( 9578): #91     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #92     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #93     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #94     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #95     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #96     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #97     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #98     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #99     RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #100    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #101    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #102    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #103    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #104    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #105    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #106    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #107    RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3362:13)
I/flutter ( 9578): #108    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #109    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #110    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #111    _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:743:15)
I/flutter ( 9578): #112    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #113    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #114    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #115    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #116    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #117    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #118    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #119    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #120    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #121    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
I/flutter ( 9578): #122    RenderObject.layout (package:flutter/src/rendering/object.dart:1784:7)
I/flutter ( 9578): #123    RenderView.performLayout (package:flutter/src/rendering/view.dart:153:14)
I/flutter ( 9578): #124    RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1641:7)
I/flutter ( 9578): #125    PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:884:18)
I/flutter ( 9578): #126    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:453:19)
I/flutter ( 9578): #127    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:874:13)
I/flutter ( 9578): #128    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:319:5)
I/flutter ( 9578): #129    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
I/flutter ( 9578): #130    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9)
I/flutter ( 9578): #131    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:865:7)
I/flutter ( 9578): (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter ( 9578): 
I/flutter ( 9578): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 9578): Firebase Token: c6yawLOLSuK4r65oBBNeSG:APA91bHDwlUyo2aBoaWItWfa__uwVJhJRBmd6YnR0SfNovKtsJg2SvNmutwLQI4w47PbIB5aF5Zr3OJVcRxQSPigJCGRo9d1PRQ33_e7jyOuu-c1Kdq2yfD3NOaJSumVkuG5DLUC6ITm

Content and Colors not displaying properly
🐛 Bug Report

I just switched out PageView.builder for ConcentricPageView, and the first page is blank unless you scroll to the next page and come back. The same thing happens with the colors, they are wrong until you go past and then come back to the page.

Expected behavior

Colors and widgets displaying correctly.

Reproduction steps

Switch out PageView.builder for ConcentricPageView

Configuration

None Version: 1.02

Platform:

[x] :iphone: iOS

[x] :robot: Android
opened by nico671 5

Null check operator used on a null value

opened by praharshbhatt 5

I'm getting error: "The minCompileSdk (31) specified in a dependency's AAR metadata...." while compiling example
Bug Report

As I tried to run the example in Android Phone, it shows me the error: The minCompileSdk (31) specified in a dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties) is greater than this module's compileSdkVersion (android-30). Dependency: androidx.window:window-java:1.0.0-beta04.

Expected behavior

Should've compiled without any error

Reproduction steps

Just run the example on Android Phone

Platform:

[ ] :iphone: iOS

[x] :robot: Android
opened by glitchpop-frenzy 3
add customization in move to next button
🚀 Feature Requests

Contextualize the feature

Just like cuberto original design please add customization as we can just add an arrow or image or something

Describe the feature

add an arrow or text or icon in the button to move to next page

Platforms affected (mark all that apply)

[x] :iphone: iOS

[x] :robot: Android
opened by bibek-ranjan-saha 2
Added nextButtonContent and finishButtonContent options to PageView

Added nextButtonContentand finishButtonContentoptions to PageView so that an icon or other content can be added to the circular button.

The nextButtonContentwidget is shown when there are remaining pages, while the finishButtonContentis shown on the final page.

This feature is optional and has no backward breaking changes.

opened by matwright 1
Migrate to null safety

It would be amazing if you could migrate this package to null safety. I love using it, but soon I will have to upgrade my app to sound null safety, and this package is the last one that is still not supporting that.

Thanks for your work!

opened by timcreatedit 1
Fixed null check operator issue

Removed checking if minScrollExtent == null and maxScrollExtent == null in favour of !_pageController.position.hasContentDimensions, eliminating the null check issue, making the package compatible with Flutter 2.0.

Thank you for making this package, it's beautiful, and I love using it for onboarding in my apps.

Cheers, Richard

opened by richardracz 1
Not working without stateful

import 'package:concentric_transition/concentric_transition.dart'; import 'package:flutter/material.dart';

`import 'package:concentric_transition/concentric_transition.dart'; import 'package:flutter/material.dart';

class RouteExample extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.amberAccent, // appBar: AppBar(title: Text("Page 1")), body: Center( child: RaisedButton( child: Text("Next"), onPressed: () { Navigator.push(context, ConcentricPageRoute(builder: (ctx) { return Page2(); })); }, ), ), ), ); } }

class Page2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.deepPurpleAccent, // appBar: AppBar(title: Text("Page 2")), body: Center( child: RaisedButton( child: Text("Back"), onPressed: () => Navigator.pop(context), ), ), ); } }`

opened by rupamking1 0
Button Color Animation not matched according to design
🐛 Bug Report

When we navigate to next page the button color changes instantly.

Expected behavior

According to the design in dribble , after navigating to the next page button filled with color from 0 to full .

Reproduction steps

SImple implementation

Configuration

Version: 1.x Platform:

[ ] :iphone: iOS

[ ] :robot: Android
opened by biswa1751 1
Next Button Icon Offset

💬 Questions and Help

When using the next button builder the icon is off from the circle, is there a way to ensure that it stays in place , which is in the middle of the circle?

opened by Crucialjun 3
Unnatural scrolling with mouse wheel
🚀 Feature Requests

This plug-in is fantastic and easy to use. However, when using the mouse wheel in a Flutter Web environment, scrolling movement is not smooth.

Contextualize the feature

PC Web

Describe the feature

Modifies scrolling to move naturally when scrolling using the mouse wheel in a web environment

Platforms affected (mark all that apply)

[x] 🕸️ : Web
opened by byungman-lee 0