Giter VIP home page Giter VIP logo

flutter_dough's Introduction

Flutter Dough

This package provides some widgets you can use to create a smooshy UI.

How to use

This package provides squishy widgets you can use right out of the box. Optionally, you can create custom Dough widgets for a custom squish effect. For a more complete overview on how to use the Dough library, check out the example project provided on GitHub.

Pressable Dough

Wrap any widget in PressableDough to make it squish based on a user's input gestures.

PressableDough(
    child: FloatingActionButton( ... ),
);

You can find a full example of how to use this widget here.

PressableDough Demo

Draggable Dough

Similar to Flutter's built-in Draggable widget, DraggableDough allows you to drag and drop widgets around... Only this time it's squishy!

DraggableDough<String>(
    data: 'My data',
    child: Container( ... ),
    feedback: Container( ... ),
);

You can find a full example of how to use this widget here.

PressableDough Demo

Custom Dough

If the above widgets aren't exactly what you're looking for, you can easily create your own squishy widget using the provided Dough widget! See the example project for more details on how to do this.

CustomDough Demo


Customize how the dough feels

If you don't like the default dough settings, you can easily change how the dough feels. Just wrap any widget that uses Dough in a DoughRecipe and you're good to go.

DoughRecipe(
    data: DoughRecipeData(
        adhesion: 4,
        viscosity: 250, // a more jello like substance
        usePerspectiveWarp: true, // use for added jiggly-ness
        perspectiveWarpDepth: 0.02,
        exitDuration: Duration(milliseconds: 600),
        ...
    ),
    child: PressableDough( ... ),
);

You can find a full example of how to use this widget here.

DoughRecipe Demo


Future improvements

Dough expansion – Ideally, pressing on a dough widget would push pixels away from your finger, as if you were pressing on dough (possibly using a mesh-grid?). If you have any ideas for how to achieve this, please consider contributing!

More dough widgets – Support for more out-of-the-box dough widgets will be added in the future. Some dough widget ideas include...

  • ReorderableListDough – Same as the reorderable list widget, but it's smooshy.
  • SliverListDough – Same as the sliver list widget, but it's smooshy.
  • GyroDough - Dough that morphs based on device physical-space motion.

Contributing

Contributions to this package are always welcome!

  • If you have an idea/suggestion/bug-report, feel free to create a ticket.
  • If you created a custom Dough widget or some other awesome feature that you want to share with the community, feel free to fork the repository and submit a pull request!

keywords: dough, rubber, elastic, rubber-band, rubberband, stretchy, squishy, smooshy, linear-algebra, matrix, transformation, flexible, draggable, drag, pressable, custom, ui, ux, interactive, animation, engage

flutter_dough's People

Contributors

josiahsrc avatar schwusch avatar kmdinake 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.