Ashutosh SinghFlutter, developed by Google, has gained immense popularity among mobile app developers due to its versatility, performance, and ease of use. As a cross-platform framework, Flutter enables developers to build stunning mobile applications for both Android and iOS platforms using a single codebase. To make the most of your Flutter app development journey, you need to leverage the power of various packages available in the Flutter ecosystem. This article will explore some must-have packages that can supercharge your Flutter app development and help you create high-quality, feature-rich applications.
1. Device Preview:
When developing a Flutter app, ensuring it looks great across various devices and screen sizes is crucial. The Device Preview package is a lifesaver in this regard. It enables developers to preview their app’s UI on different devices, including smartphones and tablets, directly from their development environment. With Device Preview, you can quickly identify and fix UI issues specific to different screen sizes, saving you valuable time during testing and debugging.
Pub Url- https://pub.dev/packages/device_preview
GitHubUrl- https://github.com/aloisdeniel/flutter_device_preview
Example-
import ‘package:flutter/material.dart’;
import ‘package:device_preview/device_preview.dart’;
void main() => runApp(
DevicePreview(
builder: (context) => MyApp(),
),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: DevicePreview.appBuilder, // Enables preview on all devices
home: Scaffold(
appBar: AppBar(
title: Text(‘Device Preview Example’),
),
body: Center(
child: Text(
‘Hello, Flutter!’,
style: TextStyle(fontSize: 20),
),
),
),
);
}
}
2. Flutter Secure Storage:
Security is a top priority in modern app development, especially when handling sensitive data. The Flutter Secure Storage package provides a robust and secure solution for storing sensitive information, such as authentication tokens and user credentials. It encrypts data before storing it on the device, making it a reliable choice for protecting user data and ensuring a trustworthy user experience.
Pub Url- https://pub.dev/packages/flutter_secure_storage
GitHubUrl- https://github.com/mogol/flutter_secure_storage/tree/develop
Example-
import ‘package:flutter/material.dart’;
import ‘package:flutter_secure_storage/flutter_secure_storage.dart’;
final storage = FlutterSecureStorage(); // Initialize secure storage
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Flutter Secure Storage Example’),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
// Store and retrieve data securely
await storage.write(key: ‘username’, value: ‘JohnDoe’);
String username = await storage.read(key: ‘username’);
print(username);
},
child: Text(‘Store and Retrieve Data’),
),
),
),
);
}
}
3. Dio
Networking is an integral part of mobile app development, and the Dio package simplifies the process of making HTTP requests and handling API interactions. Dio offers a comprehensive set of features, including request and response interceptors, timeouts, and cancellation support. It’s a performant and flexible package that can significantly enhance your app’s networking capabilities.
Pub Url- https://pub.dev/packages/dio
GitHubUrl- https://github.com/cfug/dio/tree/main
Example-
import ‘package:flutter/material.dart’;
import ‘package:dio/dio.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Dio Example’),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
try {
// Make an HTTP GET request using Dio
Response response = await Dio().get(‘https://jsonplaceholder.typicode.com/posts/1’);
print(response.data);
} catch (e) {
print(e.toString());
}
},
child: Text(‘Make HTTP Request’),
),
),
),
);
}
}
4. Flutter Native Splash
First impressions matter, and that’s why a splash screen can have a significant impact on your app’s user experience. The Flutter Native Splash package allows you to customize the splash screen natively for both Android and iOS platforms. With smooth and eye-catching splash screens, you can create a polished and professional onboarding experience for your users.
Pub Url- https://pub.dev/packages/flutter_native_splash
GitHubUrl- https://github.com/jonbhanson/flutter_native_splash
Example-
- Configure flutter_native_splash:
Create a new file named flutter_native_splash.yaml in the root directory of your Flutter project and add the following configuration:
flutter_native_splash:
image: assets/splash.png
colour: “42a5f5”
android: true
ios: true
Make sure to replace assets/splash.png with the path to your splash screen image. The colour should be in hexadecimal format (without the # symbol).
- Generate Native Splash Screens
Run the following command in your terminal:
flutter pub run flutter_native_splash:create
That’s it! Now your Flutter project will have native splash screens on Android and iOS devices. The flutter_native_splash package takes care of generating and configuring the splash screens for you based on the provided image and settings.
5. Network Image Cached
The performance of mobile apps may occasionally be slowed down by image loading. By effectively caching images locally, the Cached Network Image package minimizes the need to reload them on subsequent views. You can guarantee a smoother and more responsive user interface by decreasing image loading times.
Pub Url- https://pub.dev/packages/cached_network_image
GitHubUrl-https://github.com/Baseflow/flutter_cached_network_image
Example-
import ‘package:flutter/material.dart’;
import ‘package:cached_network_image/cached_network_image.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Cached Network Image Example’),
),
body: Center(
child: CachedNetworkImage(
imageUrl: ‘https://example.com/image.jpg’, // URL of the image to display
placeholder: (context, url) => CircularProgressIndicator(), // Placeholder while loading
errorWidget: (context, url, error) => Icon(Icons.error), // Error widget if the image fails to load
),
),
),
);
}
}
6. GetIt
Managing dependencies in a Flutter app can get complex, especially as the project grows. GetIt is a powerful service locator package that simplifies dependency injection. It enables you to easily register and retrieve instances of classes throughout your app, reducing coupling and making your code more maintainable and scalable.
Pub Url- https://pub.dev/packages/cached_network_image
GitHubUrl-https://github.com/Baseflow/flutter_cached_network_image
Example-
import ‘package:flutter/material.dart’;
import ‘package:get_it/get_it.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘GetIt Example’),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Register a singleton instance of MyService and use GetIt for dependency injection
var instance = GetIt.instance;
instance.registerSingleton<MyService>(MyService());
var myService = instance<MyService>();
myService.doSomething();
},
child: Text(‘Use GetIt’),
),
),
),
);
}
}
class MyService {
void doSomething() {
print(‘Service is doing something.’);
}
}
7. Google Fonts
Typography plays a vital role in app design, and the Google Fonts package provides easy access to a vast library of fonts hosted by Google. With Google Fonts, you can effortlessly integrate custom fonts into your app, elevating its overall aesthetics and branding.
Pub Url- https://pub.dev/packages/google_fonts
GitHubUrl- https://github.com/material-foundation/flutter-packages/tree/main/packages/google_fonts
Example-
import ‘package:flutter/material.dart’;
import ‘package:google_fonts/google_fonts.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Google Fonts Example’),
),
body: Center(
child: Text(
‘Hello, Flutter!’,
style: GoogleFonts.lobsterTwo(fontSize: 30), // Custom Google font style
),
),
),
);
}
}
8. Shimmer
Adding subtle animations can make your app feel more alive and engaging. The Shimmer package allows you to implement shimmering effects, popularly known as skeleton screens, to indicate content loading. This gives users visual feedback and a sense of progress, enhancing the app’s perceived performance.
Pub Url-https://pub.dev/packages/shimmer
GitHubUrl- https://github.com/hnvn/flutter_shimmer
Example:
import ‘package:flutter/material.dart’;
import ‘package:shimmer/shimmer.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Shimmer Example’),
),
body: Center(
child: Shimmer.fromColors(
baseColor: Colors.grey[300], // Base color for the shimmer effect
highlightColor: Colors.grey[100], // Highlight color for the shimmer effect
child: Container(
width: 200,
height: 100,
color: Colors.grey[300], // Base color for the child container
),
),
),
),
);
}
}
9. URL Launcher
The URL Launcher package simplifies the process of launching URLs, emails, phone calls, and other external applications from your Flutter app. By utilizing URL Launcher, you can seamlessly integrate external functionalities, providing users with a smoother experience and enhancing app usability.
Pub Url- https://pub.dev/packages/url_launcher
GitHubUrl- https://github.com/flutter/packages/tree/main/packages/url_launcher
Example:
import ‘package:flutter/material.dart’;
import ‘package:url_launcher/url_launcher.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
_launchURL() async {
const url = ‘https://example.com’; // URL to launch
if (await canLaunch(url)) {
await launch(url); // Launch the URL using the default app (e.g., browser)
} else {
throw ‘Could not launch $url’;
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘URL Launcher Example’),
),
body: Center(
child: ElevatedButton(
onPressed: _launchURL,
child: Text(‘Open URL’),
),
),
),
);
}
}
10. Animations
Animations breathe life into an app, making it more interactive and engaging. Flutter’s built-in animation package offers a wide range of animation options, from simple transitions to complex custom animations. By adding carefully crafted animations, you can create an immersive user experience that keeps users coming back for more.
Pub Url- https://pub.dev/packages/animations
GitHubUrl- https://github.com/flutter/packages/tree/main/packages/animations
Example:
import ‘package:flutter/material.dart’;
import ‘package:flutter/scheduler.dart’;
import ‘container_transition.dart’;
import ‘fade_scale_transition.dart’;
import ‘fade_through_transition.dart’;
import ‘shared_axis_transition.dart’;
void main() {
runApp(
MaterialApp(
theme: ThemeData.from(
colorScheme: const ColorScheme.light(),
).copyWith(
pageTransitionsTheme: const PageTransitionsTheme(
builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: ZoomPageTransitionsBuilder(),
},
),
),
home: _TransitionsHomePage(),
),
);
}
class _TransitionsHomePage extends StatefulWidget {
@override
_TransitionsHomePageState createState() => _TransitionsHomePageState();
}
class _TransitionsHomePageState extends State<_TransitionsHomePage> {
bool _slowAnimations = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Material Transitions’)),
body: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
_TransitionListTile(
title: ‘Container transform’,
subtitle: ‘OpenContainer’,
onTap: () {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const OpenContainerTransformDemo();
},
),
);
},
),
_TransitionListTile(
title: ‘Shared axis’,
subtitle: ‘SharedAxisTransition’,
onTap: () {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const SharedAxisTransitionDemo();
},
),
);
},
),
_TransitionListTile(
title: ‘Fade through’,
subtitle: ‘FadeThroughTransition’,
onTap: () {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const FadeThroughTransitionDemo();
},
),
);
},
),
_TransitionListTile(
title: ‘Fade’,
subtitle: ‘FadeScaleTransition’,
onTap: () {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const FadeScaleTransitionDemo();
},
),
);
},
),
],
),
),
const Divider(height: 0.0),
SafeArea(
child: SwitchListTile(
value: _slowAnimations,
onChanged: (bool value) async {
setState(() {
_slowAnimations = value;
});
// Wait until the Switch is done animating before actually slowing
// down time.
if (_slowAnimations) {
await Future<void>.delayed(const Duration(milliseconds: 300));
}
timeDilation = _slowAnimations ? 20.0 : 1.0;
},
title: const Text(‘Slow animations’),
),
),
],
),
);
}
}
Conclusion
Embracing these top 10 Flutter packages can significantly enhance your app development process, improve security, boost performance, and create captivating user experiences. Each package addresses specific development challenges, helping you build high-quality Flutter apps that stand out in a competitive market. Incorporate these packages into your projects, and watch your app reach new heights of success.
Remember to keep exploring the ever-growing Flutter ecosystem for new and exciting packages that align with your app’s unique requirements. Happy Fluttering!
Taniya Pan
Add comment