glorylab / wave Goto Github PK

Describe the bug
in the hosting simple example page with just the wave plugin as background take 1 minute and 3 seconds loading.

To Reproduce
just host a Flutter web project with this build

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: WaveWidget(
         config: CustomConfig(
           gradients: [
             [Colors.red, Color(0xEEF44336)],
             [Colors.red[800], Color(0x77E57373)],
             [Colors.orange, Color(0x66FF9800)],
             [Colors.yellow, Color(0x55FFEB3B)]
           ],
           durations: [35000, 19440, 10800, 6000],
           heightPercentages: [0.20, 0.23, 0.25, 0.30],
           blur: MaskFilter.blur(BlurStyle.solid, 0.0),
           gradientBegin: Alignment.bottomLeft,
           gradientEnd: Alignment.topRight,
         ),
         backgroundColor: Colors.transparent,
         size: Size(double.infinity, double.infinity),
         waveAmplitude: 0,
       ),
     ),
   );
 }

Expected behavior
A nice loading time

Smartphone (please complete the following information):
WEB

Allow setting every gradient of waves.

Hi! Thanks for this awesome package.

I was trying to create the same result like the outer wave example:

In the available example there is also no such version. Can you please provide an example of this?

Thanks!

How to wave within a SVG image or a custom paint?

Describe the bug
Changes of waveAmplitude doesn't make any affects.

To Reproduce
Steps to reproduce the behavior:

1. Pass some waveAmplitude to the WaveWidget.
2. Change waveAmplitude in runtime.

Expected behavior
The changes applied to the waves.

Additional context
Happens in all platforms.

dear sir, i download your project, but i did not get main.dart file, can you give me a that file, please

here is the Code -

_buildCard({
required Config config,
Color backgroundColor = Colors.transparent,
DecorationImage? backgroundImage,
double height = double.infinity,
}) {
return Expanded(
child: WaveWidget(
heightPercentange: double.infinity,
config: config,
backgroundColor: backgroundColor,
backgroundImage: backgroundImage,
size: Size(
double.infinity,
controller.value * MediaQuery.of(context).size.height,
),
waveAmplitude: 0,
),
);
}

//////// here is the Scaffold //////////////////

Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Scaffold(
backgroundColor: Colors.black26,
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: AnimatedBuilder(
animation: controller,
builder: (context, child) {
return Stack(
fit: StackFit.expand,
children: [
Align(
alignment: Alignment.bottomCenter,
child: _buildCard(
height: double.maxFinite,
backgroundColor: Colors.transparent,
config: CustomConfig(
gradients: [
[Colors.red, Color(0xEEF44336)],
[Colors.pinkAccent, Color(0x77E57373)],
[Colors.deepPurple, Color(0x66FF9800)],
[Colors.deepPurpleAccent, Color(0x55FFEB3B)]
],
durations: [35000, 19440, 10800, 6000],
heightPercentages: [0.20, 0.23, 0.25, 0.30],
gradientBegin: Alignment.bottomLeft,
gradientEnd: Alignment.topRight,
),
),
// Container(
// color: Colors.deepPurpleAccent,
// height:
// controller.value * MediaQuery.of(context).size.height,
// ),
),

Describe the bug
BlurStyle.outer causes the app to crash on real device

To Reproduce
Steps to reproduce the behavior:

1. use the main.dart file in the example folder
2. Run the app on real device (N.B the app works fine on Genymotion emulator).
3. When clicking on the icon to change the BlurStyle and it is on the BlurStyle.outer, the app crashes

I am using it as an effect on a sectional header with a parallax view. when i scroll over the wave and its no longer in view, it would be nice to programatically be able to start() and stop() the animation.

Hello, is it possible to somehow combine sounds with waves animation? I would like to have a sound playing and display some animation, ideally depending on the sound volume changing wave length. Is it possible? If not, what is the best outcome I can possibly archieve?

WaveWidget does not have isLoop property in version 0.0.8. :(

Hi, I am trying to use this widget as a background and within it has some data on it. Is this possible? Or must I use an overlay?

Describe the bug
I think colors: colors is a mistake for colors: _colors in README.md.

WaveWidget(
    config: CustomConfig(
        colors: colors,
        durations: _durations,

Expected behavior

WaveWidget(
    config: CustomConfig(
        colors: _colors,
        durations: _durations,

Screenshots

Is your feature request related to a problem? Please describe.
For now, the duration that passed into the WaveWidget is not being used. It would be good to be able to stop animations after a specified duration.

Describe the solution you'd like
Add a property isLoop(bool) to the WaveWidget with default true. If isLoop is false, stop the animations after the specified duration.

Describe alternatives you've considered
n/a

Additional context
n/a

Hey
Not able to change the duration in the config, once widget is rendered.

Any clue?

Describe the bug
Error: Method not found: 'throwNullError'.
throwNullError('custom', 'colorsorgradients');

Using the git example https://github.com/glorylab/wave, I am trying to flip the widget. either by flipping the card

Transform(
  transform: Matrix4.rotationY(math.pi),
  child: _buildCard(

or by flipping the control

Card(
...
  child: Transform(
    transform: Matrix4.rotationY(math.pi),
    child: WaveWidget(
      config: config,
      backgroundColor: backgroundColor,
      backgroundImage: backgroundImage,
      size: Size(double.infinity, double.infinity),
      waveAmplitude: 0,
    ),
),

Both methods fail - first method completely hides the card, the second method shows empty card.

Can you please check this?

Thank you!

Describe the bug
When making the durations long the performance of the widget degrades to being very stuttery and having animation jank

add this widget to a blank new project
return WaveWidget(
config: CustomConfig(
gradients: [
[Colors.white, Colors.white, Colors.white],
const [Color(0xFF3ea894), Color(0xFF00BAB9), Color(0xFF42b58d)],
const [Color(0xFFbefed2), Color(0xFF39dbb1), Color(0xFF00cda3)],
const [Color(0xFF3ea894), Color(0xFF00BAB9), Color(0xFF42b58d)],
],
durations: [
43000,
43000,
45000,
45000,
],
heightPercentages: [
0.55,
0.552,
0.90,
0.91,
],
// blur: const MaskFilter.blur(BlurStyle.solid, 6),
gradientBegin: Alignment.centerRight,
gradientEnd: Alignment.centerLeft,
),
size: const Size(
double.infinity,
300, // double.infinity also has the error i thought lowering the height may improve it but it didnt
),
waveFrequency: 1,
waveAmplitude: 180,
backgroundColor: Colors.transparent,
);

please add ability to add background image in your amazing plugin
some help for you (^_-), wave.dart Line(330)

return Container(
      color: widget.backgroundColor,
      child: Stack(
        children: _buildPaints(),
      ),
    );

new

return Container(
      decoration: BoxDecoration(
        color: widget.backgroundColor,
        image: DecorationImage(image: widget.backgroundImage,fit: BoxFit.cover)
      ),
      child: Stack(
        children: _buildPaints(),
      ),
    );

add required codes as define backgroundImage vars

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Where did you put the widget on,
2. Run flutter doctor and paste the information here.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Version [e.g. 0.0.6]

Additional context
Add any other context about the problem here.

when i run it from android studio, it works perfectly but when i build apk and install it then the waves doesn't show. the other elements are showing perfectly. only waves are missing.

Allowing the coder to change the gradient position may add more personalization to waves.
Under CustomConfig > Gradients the programmer can specify the parameters gradientBegin and gradientEnd in order choose the gradient display position of the wave.

Describe the bug

Running Gradle task 'assembleDebug'...
../../.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:46:13: Error: Method not found: 'throwNullError'.
            throwNullError('custom', 'colors` or `gradients');
            ^^^^^^^^^^^^^^
../../.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:60:13: Error: Method not found: 'throwNullError'.
            throwNullError('custom', 'durations');
            ^^^^^^^^^^^^^^
../../.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:66:13: Error: Method not found: 'throwNullError'.
            throwNullError('custom', 'heightPercentages');

To Reproduce
Steps to reproduce the behavior:

1. When try run code on android studio
2. flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.24.0-8.0.pre.178, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-IL)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.51.0)
[✓] Connected device (2 available)

• No issues found!

Expected behavior
Can't run app on android studio

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Android SDK build for x86

Additional context
Crashed on build application

https://stackoverflow.com/questions/59004532/background-image-is-not-appearing-in-flutter-grid-view

Is your feature request related to a problem? Please describe.
I need waveview In circle
Describe the solution you'd like
I need waveview In circle . But, It is by default only work with rectangular. no Options for circle view.

I try many ways for create waves with height full screen but no way found this is output

and this is my code

return Stack( children: <Widget>[ Align( alignment: Alignment.bottomCenter, child: WaveWidget( config: CustomConfig( gradients: [....], durations: [19440, 10800, 6000], heightPercentages: [0.05, 0.01, 0.02], blur: MaskFilter.blur(BlurStyle.solid, 10), gradientBegin: Alignment.bottomCenter, gradientEnd: Alignment.topCenter, ), backgroundColor: Color.fromARGB(255, 22, 21, 21), size: Size( double.infinity, MediaQuery.of(context).size.height, ), waveAmplitude: 14, ), ),

Describe the bug
../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:46:13: Error: Method not found: 'throwNullError'.
throwNullError('custom', 'colorsorgradients');
^^^^^^^^^^^^^^
../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:60:13: Error: Method not found: 'throwNullError'.
throwNullError('custom', 'durations');
^^^^^^^^^^^^^^
../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/wave-0.1.0/lib/config.dart:66:13: Error: Method not found: 'throwNullError'.
throwNullError('custom', 'heightPercentages');

To Reproduce
Steps to reproduce the behavior:
Run your example project

Expected behavior
Run without errors

Smartphone (please complete the following information):
WEB

Additional context
flutter channel DEV

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Where did you put the widget on,
2. Run flutter doctor and paste the information here.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Version [e.g. 0.0.6]

Additional context
Add any other context about the problem here.

Describe the bug
The wave is working fine on Chrome but not on Safari

To Reproduce
Fl_catalogue
Open this URL, on Chrome, the wave looks fine, but on Safari, the wave is black.

Expected behavior
Irrespective of the given gradient colour, It always rendered black on Safari.

Is your feature request related to a problem? Please describe.
This suggested feature would enable customization on the wave animation cycle.

Describe the solution you'd like
An enum for every possible action on AnimationStatus.completed, and an additional parameter to set the animation's Curve.

Describe alternatives you've considered
Add a 'curve' parameter in WaveWidget, 'reverseOnEnd' and 'resetOnEnd'.

Additional context
I've made a fork and a commit at AlvBarros/wave, and was about to create a Pull Request to this plugin.
It's not the best solution, but solved my problem and I thought that I'd share.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Where did you put the widget on,
2. Run flutter doctor and paste the information here.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Version [e.g. 0.0.6]

Additional context
Add any other context about the problem here.

Can it be horizontal??

hi. Thank you for your hard work.

Is this possible just show one wave？