An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
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 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!
Original Link: https://dev.to/slimpotatoboy/top-5-flutter-packages-that-you-need-to-add-to-your-flutter-project-right-now-5d68
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To