Git Product home page Git Product logo

flutter_sinusoidals's Introduction

flutter_sinusoidals

Pub

A flutter package that helps you to visualize sine waves as you desire. All basic waves are already supported, plus customized waves & some pre-defined waves.

Overview

Features

  • Creating a sine wave.
  • Creating a stack of sine waves.
  • Combine multiple sine waves together.
  • This package use clipping to achieve wave effect so theoretically you can apply it to any widget. For example, an AppBar with a wave on the bottom.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_sinusoidals:

In your code add the following import:

import 'package:flutter_sinusoidals/flutter_sinusoidals.dart';

Built-in waves

This package comes with 4 kinds of sine waves:

Sinusoidal

A widget which helps visualize a sinusoidal.

Overview

Example of a sinusoidal:

Sinusoidal(
  model: const SinusoidalModel(
    formular: WaveFormular.standing,
    amplitude: 25,
    waves: 2.5,
    frequency: 1.5,
  ),
  child: Container(
    height: 100,
    color: Colors.blue,
  ),
),

Sinusoidals

A widget which helps visualize a stack of sinusoidals.

Overview

Example of a sinusoidals:

Sinusoidals(
  itemCount: 3,
  builder: (context, index) {
    return SinusoidalItem(
      model: SinusoidalModel(
        formular: WaveFormular.travelling,
        amplitude: _amplitude,
        waves: _waves,
        translate: 5.0 * (index + 1),
        center: 5.0 * (index + 1),
      ),
      child: Container(
        height: _height,
        color: _colors[index],
      ),
    );
  },
);

CombinedWave

A widget which helps visualize a combined wave.

A combined wave is a wave that is formed by adding multiple sinusoidals together.

Overview

Example of a combined wave:

CombinedWave(
  reverse: true,
  models: const [
    SinusoidalModel(
      amplitude: 25,
      waves: 20,
      translate: 2.5,
      frequency: 0.5,
    ),
    SinusoidalModel(
      amplitude: 25,
      waves: 15,
      translate: 7.5,
      frequency: 1.5,
    ),
  ],
  child: Container(
    height: 200,
    color: Colors.blue,
  ),
),

MagmaWave

A pre-defined wave that mimicking magma motion.

This is included in the package just to demonstrate that you can create an awesome wave by combining multiple waves together.

Overview

References

To know how sinusoidal works: sinusoidal

Try demos to observe how sinusoidal visually works, and create your version by forming formulas.

Changelog

See the Changelog to know what was changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fire an issue.

If you fixed a bug or implemented a feature, please send a pull request.

Special Thanks

A big thank you to KhanAcademy & Wiki for foundational knowledge about sine wave.

A big thank you to all the contributors to the project. Every PR / reported issue is greatly appreciated!

flutter_sinusoidals's People

Contributors

dungnv2602 avatar ealkanat avatar elzombieisra avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.