Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 4, 2022 01:43 pm GMT

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

Top 5 flutter packages

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 integerawait prefs.setInt('counter', 10);// to save booleanawait prefs.setBool('value', true);// to save doubleawait prefs.setDouble('decimal', 1.5);// to save stringawait prefs.setString('action', 'Start');// to save list of stringsawait 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 packageimport 'package:http/http.dart' as http;// call the url var url = Uri.https('example.com', 'whatsit/create');// get the responsevar response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});// get the response status code and bodyprint('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 textstyleText(  'This is Google Fonts',  style: GoogleFonts.lato(),),// load font dynamicallyText(  'This is Google Fonts',  style: GoogleFonts.getFont('Lato'),),// using with exisiting text styleText(  '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, fontstyleText(  '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 havent watched my first youtube video:
Click here to watch

Do subscribe and like the video. THANK YOU!

Thank you


Original Link: https://dev.to/slimpotatoboy/top-5-flutter-packages-that-you-need-to-add-to-your-flutter-project-right-now-5d68

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To