Top 5 Flutter Packages that you need to add to your Flutter Project RIGHT NOW.

1. Shared Preferences

url: https://pub.dev/packages/shared_preferences

Shared preferences is a no-brainer plugin for flutter developers. This plugin are mostly used for saving simple data like tokens, usernames. It is simple to use shared preferences and can store multiple data types.

To Write the data to shared preferences

// Obtain shared preferences.
final prefs = await SharedPreferences.getInstance();
// the first parameter is called key and second parameter is its value
// to save integer
await prefs.setInt('counter', 10);
// to save boolean
await prefs.setBool('value', true);
// to save double
await prefs.setDouble('decimal', 1.5);
// to save string
await prefs.setString('action', 'Start');
// to save list of strings
await prefs.setStringList('list', <String>['Earth', 'Moon', 'Sun']);

To Read the data to shared preferences

// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');
// same goes to all the other data types

To remove entry

// Remove data for the 'counter' key.
final success = await prefs.remove('counter');

2. Http

url: https://pub.dev/packages/http

Http package is used for making HTTP request to the api. There are many other packages to call the api but this is the official and easiest way to call the api. I use this package in all of my projects.

Usage:

// import the package
import 'package:http/http.dart' as http;
// call the url 
var url = Uri.https('example.com', 'whatsit/create');
// get the response
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
// get the response status code and body
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

3. Go Router

url: https://pub.dev/packages/go_router

Go Router is a declarative routing package for flutter. This mean it is a url-based navigation. It is very easy to use and better for the navigation rather than the old method.

Usage:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(App());
class App extends StatelessWidget {
  App({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'GoRouter Example',
    );
  }
final GoRouter _router = GoRouter(
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          return ScreenA();
        },
      ),
      GoRoute(
        path: '/page1',
        builder: (BuildContext context, GoRouterState state) {
          return ScreenB();
        },
      ),
    ],
  );
}

4. Google Fonts

url: https://pub.dev/packages/google_fonts

Do you need to use different fonts in your app? Google fonts is the one package for you. It uses the fonts from fonts.google.com where you can check the fonts and try it out there before using in your app. Google fonts contains more than 1400 fonts and you can use any of those in your app right away.

Usage:

import 'package:google_fonts/google_fonts.dart';
// using with default textstyle
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),
// load font dynamically
Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont('Lato'),
),
// using with exisiting text style
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.headline4),
),
// override the fontSize, fontWeight, fontstyle
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.headline4,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

but I prefer to use it on textTheme in main.dart which is very easy.

go to your material app theme section and add this

theme: ThemeData(
  fontFamily: "Lato",
  textTheme: GoogleFonts.latoTextTheme(),
),

5. Cached Network Image

url: https://pub.dev/packages/cached_network_image

Cache Network Image is the most useful image package which is used to show dynamic images from internet asap in your app.

Usage:

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

Thank You!

If you haven’t watched my first youtube video:
Click here to watch

Do subscribe and like the video. THANK YOU!