Flutter Reference
Layouts
Flutter Layout Cheat Sheet - https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding - https://www.youtube.com/watch?v=RJEnTRBxaSg
Building Layouts -
https://flutter.dev/docs/development/ui/layout/tutorial
Ux challenge on grid - https://lh3.googleusercontent.com/-MYvBdXoTTyQ/XnH8Eoc9M_I/AAAAAAAAAbw/xsp2g1hbYTgm8Vt5fLtCIzgXP-kf5p_mgCK8BGAsYHg/s0/2020-03-18.png
ux challenge on grid - https://lh3.googleusercontent.com/-Jr5npcZQku8/XnH7kjprZ1I/AAAAAAAAAbo/MneYnj7a03o0d1Y0z3_kgbil8u5wvxFDQCK8BGAsYHg/s0/2020-03-18.png
ux challenge on slider - https://lh3.googleusercontent.com/-5yWQf8ReaD0/XoyA2EXAmEI/AAAAAAAAA04/yV9s1ZHvYa8CDLIwhd00_UKn5QYGtQJTgCK8BGAsYHg/s0/2020-04-07.png
Fetching data from internet
https://flutter.dev/docs/cookbook/networking/fetch-data
Sending Data to the server
https://flutter.dev/docs/cookbook/networking/send-data
Forms
https://flutter.dev/docs/cookbook/forms/validation
Adding Interactivity - https://flutter.dev/docs/development/ui/interactive
Adding interactivity to your Flutter app
Bloc Pattern
Flutter App: fetching data from the API using the BLoC pattern architecture - https://medium.com/zipper-studios/flutter-fetch-data-from-api-and-architect-your-app-using-bloc-pattern-b826f80d6996
Architect your Flutter project using BLOC pattern - https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1
Flutter: Handling your network API calls like a boss! - https://itnext.io/flutter-handling-your-network-api-calls-like-a-boss-936eef296547
Navigation
Navigate with named routes - https://flutter.dev/docs/cookbook/navigation/named-routes
Best Practicesin Navigation - https://www.filledstacks.com/snippet/clean-navigation-in-flutter-using-generated-routes/
The Best Flutter Responsive UI Pattern https://www.filledstacks.com/post/the-best-flutter-responsive-ui-pattern/
Assignments in this order
Food Delivery App UI with Functionality (They have used "provider concept" in that..along with bloc pattern) - https://www.youtube.com/watch?v=wWH66F9y63U&t=2534s
Drag and Drop - Flutter Tutorial - https://www.youtube.com/watch?v=pKO54ttCV5I
Ux challenge using following widgets - https://dribbble.com/shots/3466120
Shape of View widget https://pub.dev/packages/shape_of_view#-readme-tab-
Circle Avatar https://api.flutter.dev/flutter/material/CircleAvatar-class.html
Stack Widget https://api.flutter.dev/flutter/widgets/Stack-class.html
Positioned Widget https://api.flutter.dev/flutter/widgets/Positioned-class.html
Raised Button with rounded radius https://stackoverflow.com/questions/49991444/create-a-rounded-button-button-with-border-radius-in-flutter
Independent Assignments
Charts - https://google.github.io/charts/flutter/gallery.html
_https://www.filledstacks.com/snippet/quick-and-easy-dialogs-in-flutter-with-rf-flutter/
Quick and Easy Dialogs in Flutter with RfFlutter -
https://www.filledstacks.com/snippet/quick-and-easy-dialogs-in-flutter-with-rf-flutter/
https://dribbble.com/shots/6541291-Snowball-website-alive-Dashboard-page
https://dribbble.com/shots/7036184/attachments/36346?mode=media
Better Animation When Keyboard Opens - https://www.filledstacks.com/snippet/better-animation-when-keyboard-opens/
Dialog Box Service - https://www.filledstacks.com/post/manager-your-flutter-dialogs-with-a-dialog-manager/
Ux Challenge(only left side using card widget) - https://dribbble.com/shots/4486758-Relationship-Coaching-App
in-app notifications and toast messages - https://www.filledstacks.com/snippet/in-app-notifications-in-flutter/
https://www.filledstacks.com/snippet/easy-toasts-with-ok-toast/
Request Permissions in Flutter as a Service - https://www.filledstacks.com/snippet/request-permissions-in-flutter-as-a-service/
Internationalizing Flutter apps - https://flutter.dev/docs/development/accessibility-and-localization/internationalization
Using the Flutter inspector - https://flutter.dev/docs/development/tools/devtools/inspector
Performance - https://flutter.dev/docs/perf
Animations - https://flutter.dev/docs/development/ui/animations
Ux challenge - https://dribbble.com/shots/6191054-Loan-repayment-bill
UX Challenge - https://dribbble.com/shots/6037533-Finance-Mobile-App-UI
UX Challenge(left side animated progress bar) - https://lh3.googleusercontent.com/-5yWQf8ReaD0/XoyA2EXAmEI/AAAAAAAAA04/yV9s1ZHvYa8CDLIwhd00_UKn5QYGtQJTgCK8BGAsYHg/s0/2020-04-07.png
Take a picture using the camera - https://flutter.dev/docs/cookbook/plugins/picture-using-camera
Separating build environments in Flutter apps - https://iiro.dev/2018/03/02/separating-build-environments/
Inherited Widgets Explained - Flutter Widgets 101 Ep. 3 https://www.youtube.com/watch?v=Zbm3hjPjQMk
Setting up Lint Rules in Dart-Flutter
https://medium.com/podiihq/setting-up-lint-rules-in-dart-flutter-1ebbed0418a6
https://dart-lang.github.io/linter/lints/
Shared preferences Login App https://pub.dev/packages/shared_preferences
Resources-
Creating Custom Progress Indicators: https://www.youtube.com/watch?v=TiH0HYBFMMI&pp=wgIECgIIAQ%3D%3D&feature=push-sd&attr_tag=TFGcP0Kx6a9-aL2u%3A6 Mobile Pickers - https://material.io/components/pickers/#mobile-pickers
Quick and Easy Dialogs in Flutter with RfFlutter - https://www.filledstacks.com/snippet/quick-and-easy-dialogs-in-flutter-with-rf-flutter/
Better Animation When Keyboard Opens - https://www.filledstacks.com/snippet/better-animation-when-keyboard-opens/
Dialog Box Service - https://www.filledstacks.com/post/manager-your-flutter-dialogs-with-a-dialog-manager/
in-app notifications and toast messages - https://www.filledstacks.com/snippet/in-app-notifications-in-flutter/
https://www.filledstacks.com/snippet/easy-toasts-with-ok-toast/
JSON and serialization - https://flutter.dev/docs/development/data-and-backend/json
Block Pattern (3 series video)( - https://www.youtube.com/watch?v=pdV2GzstYCQ&feature=youtu.be
firebase - https://github.com/HackerNews/API
Widget — State — BuildContext — InheritedWidget -
Articles - https://medium.com/zipper-studios
https://medium.com/flutter-community/widget-state-buildcontext-inheritedwidget-898d671b7956
https://stackoverflow.com/questions/49100196/what-does-buildcontext-do-in-flutter
Json Data
https://financialmodelingprep.com/api/v3/company/profile/AAPL
used for departure bloc pattern in 3 part series video - http://www3.septa.org/hackathon/Arrivals/Suburban%20Station/5/
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson - used by Paulo in maps exrthquakes app. Shows 2.5 days earthquakes. can select others also lke per day, etc.
Dart
Dart Cheatsheet - https://dart.dev/codelabs/dart-cheatsheet convert map to list - subjectList = response.map((json) => Subject.fromJson(json)).toList();
Chrome Extensions:
- JSON Viewer Awesome - to show JSON in nice format with chart and tree structure
- JSON to Dart Converter - https://in.search.yahoo.com/search?fr=mcafee&type=E210IN714G0&p=json+to+dart - Paste the JSON data, it will convert. Copy it and put in the Model class.
- https://javiercbk.github.io/json_to_dart/ - to easily convert json to dart models. If this doesn't wok then first parse and correct it in the next one given below.
- https://jsonformatter.org/json-parser
Packages:
- Geolocator Get the last known location; Get the current location of the device; Get continuous location updates; Check if location services are enabled on the device; Calculate the distance (in meters) between two geocoordinates; Calculate the bearing between two geocoordinates;
example: converting location to getting address of place
Converting this Into an Address We don’t have to stop there though! We can get a Placemark which is essentially an approximation of the user’s current location from the latitude and longitude. Let’s see this in action:
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:geolocator/geolocator.dart';
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }
class _HomePageState extends State { final Geolocator geolocator = Geolocator()..forceAndroidLocationManager;
Position _currentPosition; String _currentAddress;
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Location"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if (_currentPosition != null) Text(_currentAddress), FlatButton( child: Text("Get location"), onPressed: () { _getCurrentLocation(); }, ), ], ), ), ); }
_getCurrentLocation() { geolocator .getCurrentPosition(desiredAccuracy: LocationAccuracy.best) .then((Position position) { setState(() { _currentPosition = position; });
_getAddressFromLatLng();
}).catchError((e) {
print(e);
});
}
_getAddressFromLatLng() async { try { List p = await geolocator.placemarkFromCoordinates( _currentPosition.latitude, _currentPosition.longitude);
Placemark place = p[0];
setState(() {
_currentAddress =
"${place.locality}, ${place.postalCode}, ${place.country}";
});
} catch (e) {
print(e);
}
} }
GeoLocator -- gives more control on current location. Little advanced than location plugin.
Geocoder - Forward and reverse geocoding.
example: import 'package:geocoder/geocoder.dart';
// From a query final query = "1600 Amphiteatre Parkway, Mountain View"; var addresses = await Geocoder.local.findAddressesFromQuery(query); var first = addresses.first; print("${first.featureName} : ${first.coordinates}");
// From coordinates final coordinates = new Coordinates(1.10, 45.50); addresses = await Geocoder.local.findAddressesFromCoordinates(coordinates); first = addresses.first; print("${first.featureName} : ${first.addressLine}");
This article explains both plugins with map well. https://medium.com/swlh/working-with-geolocation-and-geocoding-in-flutter-and-integration-with-maps-16fb0bc35ede
Explains how to get nearbyplaces and plot on map. gets user location also https://medium.com/flutter-community/building-places-location-search-with-map-view-using-flutter-1-0-alfian-losari-66cacb3bcc24
Comments