Creating Beautiful UI with Flutter

#flutter #android #ui #ios

Flutter offers a variety of packages that you can specifically use for enhancing your UI, and in this blog I'm going to share some of my most used packages for creating a beautiful UI:

Loading Animation Packages

1: loading_animation_widget: Loading animation widget enables users with animated loaders that one can use instead of the traditional Circular Progress Bar.

2: shimmer: For Android Users particularly , shimmer is one of the most popular loader in use. The shimmer package provides a minimalistic way to implement shimmer effect.

3: loader_overlay: If you specifically wish to block the UI interactions while a loading is in effect, this package is just for you!

Drawer Widgets

1: Fluttergems list of Drawers: Contains an extensive list of drawer packages available in flutter.

UI Widgets for body

1: getx: get is mainly used for state management, however, it also provides basic widgets such as toaster, snackbar, dialogbox, alert dialog, bottom modal sheet etc. It eases the use of these widgets by wrapping them into a single widget that can mostly be adopted by just one or two lines of code.

2: carousel_slider: If you wish to showcase a list of images in an animated transition, this package is just for you! Highly similar for those who've came from a web background.

3: Font Awesome and Google Fonts: Tired of adding each font seperately and need a similar process to use custom fonts? Font Awesome and Google Fonts package provides you with a plethora of Fonts freely available that you can directly use with your Textstyle widget!

4: fluent_ui: Since you can now also create Windows applications using Flutter, Fluent UI similar to Material UI and Cupertino UI for Android and iOS, provides Windows-specific UI widgets that can be used for creating Windows-lookalike UI, and it's not just limited for Windows!

Bottom Navigation Bar Packages

1: animated_bottom_navigation_bar: This is one of the best Bottom Navigation Bar I've came across, provides animated navigation with a variety of customizations available.

2: persistent_bottom_nav_bar: One of the most used Bottom Navigation Bar, provides minimalistic design with easy to use and customizations.

It is noteworthy that while these packages are useful, the core usage of them depends on the use case, which varies depending upon the core functionality.

Some other packages you should check out:

animate for animation!

Find some Additional Resources below:

Flutter Gems Widget Library: The Flutter Gems website also provides an extensive list of many available flutter packages.
Top 18 Flutter Widgets to Spice Up your app: This is also a very useful list of packages, haven't included them in my list as they've already been mentioned here. Do check out this guide as well!
Flutter UI Kit: Contains pre-made templates for basic pages such as login, profile, dashboards and a lot more. 100% Open sourced and easy to use!