Here we have compiled a list of the Top 5 Dart/Flutter Packages for the beautiful UI design of Android, iOS, or web apps. I am sure you must have a good command of backend coding but when it comes to frontend design you can always rely on Flutter packages for beautiful-looking UI designs.
Using these Flutter Packages specially designed for beautiful UI elements you can create a great-looking flutter mobile or web app UI without wasting too much time thinking about pixel-by-pixel UI adjustments.
Contents
What is Flutter?
Flutter is a Google-backed open-source software development kit. It is very popular because you can create multi-platform applications using a single project.
Flutter was created in March 2017 and after just 5 years it has gained popularity. Popular apps like Google Ads, Lunching, RunPee, etc. have been developed using the Flutter framework.
Also Read: Angular Vs Flutter for web app development. Know which one is better
What is a Dart/Flutter Package?
Flutter Packages are ready-to-use libraries of code (wrapped and deployed on the repository) by experts that you can use in your project to implement a specific feature.
In lament terms, you can simply import any of the Dart/Flutter Packages into your Mobile development project and leverage the functionality that the package is intended to deliver. For example, you can import rating related flutter package to implement the user rating popup. We have discussed 5 such Flutter packages for better UI development.
Please note Flutter packages are not limited to UI design but they can also be used for various other activities like Google Sign In, Firebase database communication, Show AdMob mobile ads, and many more. However, in this article, we are limiting our discussion to flutter packages that are used for mobile app UI design and to create a better look and feel.
Also Read: What is a Library, Framework, Web Services, Packages, and API in Programming?
5 Best Dart/Flutter Packages for UI Design
1. Lottie
Lottiefiles is a famous website to browse animations, icons, illustrations, and much more graphical stuff. Lottie for Flutter is a package designed to parse animations designed as JSON and display them on Android and iOS apps.
One of the best qualities of the Lottie package is that you can control the animations, like reverse/forward animation, and stop animation after a particular interval. We have used Lottie in one of our mobile apps. Here is how it looks (with animation):
How to use the Lottie package in the flutter project?
Step 1- Install the Lottie Package in your project using the command –
Package Directory> flutter pub add lottieor Add the below manually in your pubsec.yaml file –
lottie: ^2.0.0 (latest version)
Step 2- Add the package to your dart code.
import 'package:lottie/lottie.dart'Step 3- Get the JSON from the LottieFiles website.
Step 4– Write the code to add and control Lottie’s animation.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json', width: 200,height: 200,
fit: BoxFit.fill,
//Controller
controller: _controller,
onLoaded: (composition) {_controller
..duration = composition.duration
..forward();}),
],
),
),
);
}
}Try Lottie Package
2. Avatar_Glow
This is one of the best Flutter Packages for creating a catchy UI using a glow effect on an avatar, icon, or any given image asset. This Flutter package provides widgets with sets of parameters to configure the glow effect as per your requirement.
We used this earlier to create a login screen on our app. Here is how it looked –
How to use the avatar_glow flutter package to create a beautiful UI element?
Step 1- Install the avatar_glow package in your project using the command –
Package Directory> flutter pub add avatar_glowor Add the below manually in your pubsec.yaml file –
avatar_glow: ^2.0.2 (latest version)
Step 2- Add the package to your dart code.
import 'package:avatar_glow/avatar_glow.dart'Step 3– Write the code to add the glow effect to any image, icon, or avatar.
import 'package:flutter/material.dart';
import 'package:avatar_glow/avatar_glow.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Avatar on icon
AvatarGlow(
glowColor: Colors.blue,
endRadious: 115,
animate: true,
child: Material(
elevation: 5.0,
shape: CircleBorder(),
child: CircleAvatar(
radius:60,
backgroundColor: Colors.blue,
child: Icon( //You can use asset image here instead of icon
Icons.security_outlined,
size: 75,
color:Colors.white,
),
),
),
//You can add more glowing items here in list view
),
],
),
),
);
}
}Try avatar_glow Package
3. Rating_Dialog
Persuading users to rate your app is an art and a good artist knows that it cannot be possible without a good-looking rating dialogue. Rating_Dialog is one of the best Flutter packages that offer better-looking UI and it is very easy-to-implement rating features using this package.
I have personally implemented the rating feature using the rating_dialog package. Here is how it looks:
How to use the rating_dialog flutter package to create a beautiful rating popup?
Step 1- Install the rating_dialog package in your project using the command –
Package Directory> flutter pub add rating_dialogor Add the below manually in your pubsec.yaml file –
rating_dialog: ^2.0.0 (latest version)
Step 2- Add the package to your dart code.
import 'package:rating_dialog/rating_dialog.dart'Step 3– Write the code to implement the rating dialogue.
import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Button to pop Rating Dialog
IconButton(icon:Icon(Icons.rate_review, size: 50), alignment:Alignment.center),
onPressed: () async{
final ratingDialog = RatingDialog(
starColor: Colors.amber,
starSize: 25,
enableComment: true,
title: Text("Your App Name"),
message: Text("Please rate our beautiful App"),
image: CirculeAvatar(radius: 50, child: Image.asset("Your Image url")),
),
),
submitButtonText: "Submit",
onSubmitted: //Your logic to push the user rating message to backend and redirect to playstore,
)
}
),
],
),
),
);
}
}Try rating_dialog Package
4. Pie_Chart
pie_chart package provides a pie chart widget with controllable animation. Additionally, this package also offers various other parameters like colors, configurable data maps, custom legends, etc. to create a neat-looking pie chart UI for your flutter mobile and desktop application.
We have extensively used the pie chart widget in our android mobile app. Here is the example screen:
How to use the pie_chart flutter package?
Step 1- Install the pie_chart package in your project using the command –
Package Directory> flutter pub add pie_chartor Add the below manually in your pubsec.yaml file –
pie_chart: ^5.3.2 (latest version)
Step 2- Add the package to your dart code.
import 'package:pie_chart/pie_chart.dart'Step 3– Write the code to implement the pie chart.
import 'package:flutter/material.dart';
import 'package:pie_chart/pie_chart.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Pie Chart
PieChart(
dataMap: //your data map Map<String, double> datamap = new HashMap();
animationDuration: Duration(milliseconds:2000),//2 seconds
chartLegendSpacing: 50,
chartRadius: 150,
colorList: [list of colors based on participating factors],
chartType: ChartType.ring,//you can select disc or ring
ringStrokeWidth: 35, //if you opt for ring
centerText: "Awesome Pie Chart",
legendOptions:LegendOptions(//legend options. In my screenshot it would //be Contribution SIP: and Contribution Profit:
showLegendInRow: true, //in case of false it will be shown in column
legendPosition: LegendPosition.bottom,
legendTextStyle: TextStyle()//As per your choice
chartValueOptions: ChartValueOptions(showChartValueBackground: true,
showChartValueOutside: true,
)
)
)
]
),
),
),
}
}Try pie_chart Package
5. syncfusion_flutter_gauges
If you are looking to create a metered gauge to measure the intensity of some data graphically then you must use one of the coolest flutter packages to enhance the look and feel of your android and iOS mobile app, that is syncfusion_flutter_gauges.
I have developed a mobile app related to finance. There is a term in finance called MMI which is between 0-100 and represents the market mood based on intervals. I have implemented this using this package flutter package syncfusion_flutter_gauges. Here is what it looks like:
How to use the syncfusion_flutter_gauges flutter package to create a beautiful radial gauge?
Step 1- Install the syncfusion_flutter_gauge package in your project using the command –
Package Directory> flutter pub add syncfusion_flutter_gaugeor Add the below manually in your pubsec.yaml file –
syncfusion_flutter_gauge: ^20.2.44 (latest version)
Step 2- Add the package to your dart code.
import 'package:pie_chart/syncfusion_flutter_gauge.dart'Step 3– Write the code to implement gauge meter UI.
import 'package:flutter/material.dart';
import 'package:pie_chart/syncfusion_flutter_gauge.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Radial Gauge
SfRadialGauge(axes: <radialAxis>[
radialAxis(
startAngle: 0,
endAngle: 270,
minimum: 0,
maxium: 100,
interval: 10,
radiusFactor: 0.4,
showAxisLines: false,
minorTicksPerInterval: 4, //You can have two dials.
showLegendInRow: true, //in case of false it will be shown in column
legendPosition: LegendPosition.bottom,
legendTextStyle: TextStyle()//As per your choice
chartValueOptions: ChartValueOptions(showChartValueBackground: true,
majorTickStyle: sMajorTickStyle(length:8, thickness:3,),
axisLabelStyle: GaugeTextStyle(color:Colors.white, fontSize:14),
ranges: <GaugeRange>[
GaugeRange(startValue:0, endValue:50, label:"Below 50",
color:Colors.red),
GaugeRange(startValue:51, endValue:100, label:"Above 50",
color:Colors.green),
]//We created two guages in this example.
pointers: <GaugePointer>[ //Now let's design pointer
NeedlePointer(
value: 67, //hardcoded for time being. You can write logic.
needleLength: 1,
needleStartWidth:1.5, needleEndWidth:6,needleColor: red,
enableAnimation: true, AnimationType: AnimationType.ease,
knobStyle: KnobStyle(knobRadius:0.9,
sizeUnit:GaugeSizeUnit.factor),
]
)
)
)
]
),
),
),
}
}Try syncfusion_flutter_gauges Package
Best practices for better flutter UI designing-
Flutter is a completely widget-based development framework which makes it tricky to develop UI. It is important to know how to and when to use which widget.
It is always recommended to read the latest Flutter documentation to know about widgets, and stay updated with the latest trends, and new features.
While developing a mobile app using flutter you should always decide whether it is going to be for a single platform or a multiplatform application. In the case of multiplatform you should always write code considering both platforms, and also use packages which is platform independent (or at least work for the platforms you are developing your app).
Never refrain from taking reference to other good-looking apps (don’t replicate the UI 😊 ). There are millions of designers designing good-looking Flutter UI and you should always learn from their design thinking.
Closing Thoughts
Flutter application development can be made easy using available flutter packages. We discussed 5 packages that we can use in our app to enhance its look and feel. Many other packages are already available and ready to be used for many other UI element designs. Please share with us your favorite Flutter package for beautiful UI design and we will try to feature it in this article (with your reference of course).
