Flutterexperts

In Flutter there are different ways to design beautiful UI’s but what makes it User Friendly is its Responsiveness, Smoothness, and Squishiness. This Dough package provides this squishiness to your app where you design your app smooshy to gain user attention and make it smoothy to use.

Dough package provides different features in its package like dragging, pressable and you can also pause its shape when you are dragging or pressing any widget.

Why we need this?

Though there are numerous ways to make UI interactive and feature-rich, as a user every one wants new experiences. However, functionality is important in App but when as a user you find the same UI experiences you get kind of bored.

So as service providers we need to make our app functionality-rich as well as attractive. This Dough package is compatible with changes like for features you can override its features and behaviors according to your need.

Explanation

In its explanation part, we will just go through all kind of dough widgets which can fit into your existing widget and will make your widgets squishy smooth and draggable, in this package you get the kind of slow animation feel. So let’s have a look

Pressable Dough

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

in Pressable Dough, you only need to wrap your widget with it as you can see in the below example we have used the DoughRecipe widget, in this widget, there are three options data, child, and key. In data, you can provide its viscosity and expansion value.

final doughWidget = DoughRecipe(
  data: DoughRecipeData(
    viscosity: 3000,
    expansion: 1.025,
  ),
  child: PressableDough(
    child: centerContainer,
    onReleased: (details) {
      // This callback is raised when the user release their
      // hold on the pressable dough.
      print('I was released with ${details.delta} delta!');
    },
  ),
);

https://gist.github.com/shivanchalaeologic/1c0b1e0ed8a414e5e364004e222a31c5#file-pressable_dough-dart

Draggable Dough

It allows you to drag and drop your widget when you drag your widget it shows its squishy nature.

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

for example, you can see in the below code

https://gist.github.com/shivanchalaeologic/c7b234e156a81d50db37994a519b77ae#file-draggable_dough-dart

DraggableDough works like the Flutter draggable widget, and the only extra feature is it’s squishy! So you can just use the already built drag widgets that

Custom Dough Widget

If You want to customize your own widget you can do that by using native Dough widgets, Customization does not require any specific implementation.

You only need to just provide values according to your requirement.

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( ... ),
);

https://gist.github.com/shivanchalaeologic/350c6cd79790083b90da032be844a2ff#file-custom_drag-dart

Conclusion

Dough package is easy to use and implement its methods for beautiful UI representation are best in some contexts however it is still improving there will some new changes and improvements when it comes to the modification of the new feature, yet it is easy to use of beautification of UI.

dough | Flutter Package
This package provides some widgets you can use to create a smooshy UI. This package provides squishy widgets you can…pub.dev

---

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.