Widget for displaying waves with custom color, duration, floating and blur effects.

Overview

Wave

Awesome: Flutter pub package GitHub

Widget for displaying waves with custom color, duration, floating and blur effects.

Getting Started

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, 10),
        gradientBegin: Alignment.bottomLeft,
        gradientEnd: Alignment.topRight,
    ),
    colors: [
        Colors.white70,
        Colors.white54,
        Colors.white30,
        Colors.white24,
    ],
    durations: [
        32000,
        21000,
        18000,
        5000,
    ],
    waveAmplitude: 0,
    heightPercentages: [0.25, 0.26, 0.28, 0.31],
    backgroundImage: DecorationImage(
        image: NetworkImage(
            'https://images.unsplash.com/photo-1600107363560-a2a891080c31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=672&q=80',
        ),
        fit: BoxFit.cover,
        colorFilter:
            ColorFilter.mode(Colors.white, BlendMode.softLight),
    ),
    size: Size(
        double.infinity,
        double.infinity,
    ),
),

Preview

Normal

demo

Solid Blur

demo

Inner Blur

demo

Outer Blur

demo

Normal Blur

demo

GIF

demo

Comments
  • Error on `throwNullError`

    Error on `throwNullError`

    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. Screen Shot 2020-11-10 at 14 52 16

    Smartphone (please complete the following information):

    • Device: Android SDK build for x86

    Additional context Crashed on build application

    opened by dvlop 4
  • Channel dev, 1.24.0-7.0.pre

    Channel dev, 1.24.0-7.0.pre

    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

    opened by danieramiz 4
  • Circle view needed

    Circle view needed

    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.

    opened by Kayuemkhan 2
  • spelling of property heightPercentage in WaveWidget is written wrong as

    spelling of property heightPercentage in WaveWidget is written wrong as "heightPercentange"

    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.

    opened by WaterHashira 1
  • [Help] How to create the outer wave example?

    [Help] How to create the outer wave example?

    Hi! Thanks for this awesome package.

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

    image

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

    Thanks!

    opened by vramosx 1
  • Enable dynamic wave amplitude adjustments

    Enable dynamic wave amplitude adjustments

    Explain the details for making this change. What existing problem does the pull request solve?

    With the WaveWidget inside a StreamBuilder it wasn't possible to change the waveAmplitude value based on new stream data. This change allows you to update the waveAmplitude value and have it reflected in the waves that are displayed.

    This may not be the best way to achieve this behavior, but if it's useful then great!

    opened by mhstoller 1
  • Temporary fix: Method not found: 'throwNullError'

    Temporary fix: Method not found: 'throwNullError'

    Temporary fix for the following errors:

    wave-0.1.0/lib/config.dart:46:13: Error: Method not found: 'throwNullError'.
                throwNullError('custom', 'colors` or `gradients');
                ^^^^^^^^^^^^^^
    wave-0.1.0/lib/config.dart:60:13: Error: Method not found: 'throwNullError'.
                throwNullError('custom', 'durations');
                ^^^^^^^^^^^^^^
    wave-0.1.0/lib/config.dart:66:13: Error: Method not found: 'throwNullError'.
                throwNullError('custom', 'heightPercentages');
                ^^^^^^^^^^^^^^
    
    opened by clirimfurriku 1
  • Loading Time on Web

    Loading Time on Web

    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

    opened by danieramiz 1
  • Percentage spelling is wrong

    Percentage spelling is wrong

    IMPORTANT: Please do not create a Pull Request without creating an issue first.

    Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request.

    Please provide enough information so that others can review your pull request:

    Explain the details for making this change. What existing problem does the pull request solve?

    Test plan (required)

    Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

    Code formatting

    Closing issues

    Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

    opened by shivam-modi 0
  • Add backgroundImage To Wave Params

    Add backgroundImage To Wave Params

    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

    opened by NabilNoN 0
  • customConfig is not defined

    customConfig is not defined

    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.

    opened by ABINASH56 0
  • added pause() and start() methods to Wave widget; simplified example;…

    added pause() and start() methods to Wave widget; simplified example;…

    … added macos target to test this change in example

    IMPORTANT: Please do not create a Pull Request without creating an issue first.

    Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request.

    Please provide enough information so that others can review your pull request:

    Explain the details for making this change. What existing problem does the pull request solve?

    Test plan (required)

    Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

    Code formatting

    Closing issues

    Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

    opened by vladmazur 1
  • Cannot flip widget

    Cannot flip widget

    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!

    opened by adrianvintu 0
  • Why waves do not become full screen?

    Why waves do not become full screen?

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

    photo_2022-02-15_20-03-29

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

    opened by imwolfmoon 1
  • wave libraries and it's documentation are not matching, Please update them

    wave libraries and it's documentation are not matching, Please update them

    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.

    opened by panchalhitesh 0
  • Add parameter for Curve and action for AnimationStatus.completed

    Add parameter for Curve and action for AnimationStatus.completed

    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.

    opened by AlvBarros 1
  • Enable dynamic wave amplitude adjustments

    Enable dynamic wave amplitude adjustments

    With the WaveWidget inside a StreamBuilder it wasn't possible to change the waveAmplitude value based on new stream data. This change allows you to update the waveAmplitude value and have it reflected in the waves that are displayed.

    This may not be the best way to achieve this behavior, but if it's useful then great!

    I also haven't migrated to null safety in my own project, so I don't know the implications of what I have done here, other than that it builds without errors.

    opened by mhstoller 0
Releases(0.2.0)
Owner
Protoss
We are the protoss. Children of ancient gods. We are the Firstborn. And we shall be the last left standing.
Protoss
Neumorphic containers and text widget primitives to serve as the foundation of your own unique neumorphic designs.

Clay Containers Easily create and customize beautiful, modern neumorphic containers for your Flutter project. These clay containers can become the bas

Michael Aubrey 411 Dec 21, 2022
Flutter Shine is a library for pretty and realistic shadows, dynamic light positions, extremely customizable shadows, no library dependencies, text or box shadows based on content.

Flutter Shine Show some ❤️ and star the repo to support the project Flutter widget inspired by Shine Installation Add the Package dependencies: flut

Jonathan Monga 139 Dec 16, 2022
Dart duration iso parser - Package to parse duration from ISO 8601 string

duration_iso_parser Package for parsing ISO 8601 durations string to the Duratio

Innim 1 Jan 18, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
Flutter window blur & transparency effects for on Windows & Linux. 💙

flutter_acrylic Window blur & transparency effects for Flutter on Windows & Linux Installation Mention in your pubspec.yaml. dependencies: ... flu

Hitesh Kumar Saini 438 Jan 2, 2023
Flutter library for window blur & transparency effects for on Windows & Linux. 💙

flutter_acrylic Window blur & transparency effects for Flutter on Windows & Linux Installation Mention in your pubspec.yaml. dependencies: ... flu

Hitesh Kumar Saini 437 Dec 31, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

osum_serializable The goal is to serialize almost everything you ever need! json_serializable is an amazing package to serialize classes but cannot se

Aswin Murali 2 Sep 23, 2022
Floating panel let's you create quick Floating menu for the screen.

Flutter Float Box Float Box - v1.0 Overview Float box is a true floating panel for your app, which can be docked to either edges of the screen (horizo

Akshaye JH 25 Nov 25, 2022
An app for analysing sound waves and building sounds from a visual sound wave graph

Wave This app was built for the Science Talent Search Victoria 2022. UPDATE: This project won a minor bursary prize in the Computer Programs category

William Herring 7 Dec 20, 2022
Flutter - Blur Widgets - BackdropFilter Widget

blur_widgets Flutter - Blur Widgets - BackdropFilter Widget. Screenshot: Getting Started This project is a starting point for a Flutter application. A

Ulfhrafn 3 Dec 4, 2022
A Custom Extended Scaffold with Expandable and Floating Navigation Bar

Custom Extended Scaffold Custom Flutter widgets that makes Bottom Navigation Floating and can be expanded with much cleaner a

Ketan Choyal 139 Dec 10, 2022
DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

null 582 Jan 4, 2023
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
null 0 Feb 2, 2022
Simulate color blindness in color themes.

Color Blindness on Flutter Every app has colors. How to make sure they are accessible? How to avoid accessibility issues as other people in the same p

Bernardo Ferrari 58 Dec 19, 2022
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022