Sottosezioni

Errori che gli sviluppatori di Flutter dovrebbero smettere di fare

Parte prima dell'articolo:

• 1000 lines of code  (separa meglio il codice)

• Separating widgets to functions instead of classes  (scrivi classi invece di funzioni)

• Not writing unit tests (Scrivi dei test ogni volta che crei dei componenti, se non riesci a scrivere il test vuol dire che il componente non è scritto bene...)

https://medium.com/@umutarpt/mistakes-that-flutter-developers-should-stop-doing-part-one-da5c9d7132c8 

https://aribadev.medium.com/avoid-these-16-mistakes-and-become-a-better-flutter-engineer-immediately-d35b007c5bac 

Roadmap 

• Creazione di uno screen separato da main

• Navigazione tra le pagine (Routes)

• Creazione di un widget riutilizzabile

• Creazione di un modello (model)

• Creazione di un provider (gestione dello stato)

• Utilizzo di Future

• Utilizzo di Stream (serie di eventi asincroni)

• Tutorials:

  • https://www.filledstacks.com/tutorials/4/

  • https://youtu.be/Y5X5rdzFScs (Dart & MongoDB)

Indoor positioning:

La seguente soluzioni potrebbe essere interessante. Occorre capire qual'è il numero di beacon e il posizionamento per ottenere una posizione con errore accettabile.

https://github.com/ZainCheema/Indoor-Positioning-System-using-BLE-and-Flutter

Integrate Flutter with google sheet

https://scalereal.com/android/2020/07/04/automate-publishing-android-library-to-bintray-using-github-actions.html

https://spreadsheet.dev/get-google-sheets-name-current-sheet-name-list-of-sheets-apps-script

Flutter Widget & Packages preferences 

• For every App

  • Google fonts

  • Icon Generator

  • Splash Screen

  • Block orientation

  • About Screen

  • Info Screen with slider

  • Login (advanced)

• GetX

  • Navigation

  • Snackbar

  • Dialog

  • Access data from one instance to another

  • State management

  • Easy Key/Value Storage

  • Easy Internationalization

  • Easy Validators

  • The Flutter GetX ecosystem: https://medium.com/flutter-community/the-flutter-getx-ecosystem-state-management-881c7235511d 

• 5 Useful generic packages

  • Image picker

  • Local notifications: 

    • https://medium.com/flutter-community/local-notifications-in-flutter-746eb1d606c6 

    • https://pub.dev/packages/awesome_notifications 

  • URL Launcher

  • Share

  • WebView

• Offline

  • Cache Manager (with Custom cache manager to store data in a non tmp folder)

  • Image cache manager

  • Shared preferences

• Top 5 for Advanced App  (Indoor/Outdoor/Museums, tracks etc...)

  • Maps

  • Player Audio (video)

  • Beacons (IoT)

  • QRCode /Barcode reader

  • Augmented Reality (https://www.youtube.com/watch?v=A56gVrDAXbU Flutter + Unity 3D)

    • https://pub.dev/packages/flutter_unity_widget (Unity and Flutter Widget ARFoundation)

    • https://medium.com/potato/building-with-flutter-unity-ar-experience-toolkit-6aaf17dbb725 

• Deploy App to Test Flight (iOS):

  • https://medium.com/@iqan/releasing-flutter-ios-app-to-testflight-using-xcode-21571299dbc3 

  • https://flutter.dev/docs/deployment/ios 

Code Generator

• https://fluttershapemaker.com/ Per costruire dei "percorsi" in modo visuale.

• Tutorial shape maker:  https://www.youtube.com/watch?v=AnKgtKxRLX4 

• Visual code generator: https://designer.jetspike.com/#/ 

• Another code generator for unions/pattern-matching/copy. https://pub.dev/packages/freezed 

Esempi App

https://github.com/bizz84/flutter_example_apps 

Flutter Task Management: https://youtu.be/4q_inOhnos8 

Booking Calendar:

https://pub.dev/packages/booking_calendar 

Architettura

• Nuova null safety: https://medium.com/swlh/convert-your-flutter-app-to-enjoy-null-safety-69632aa62d7a 

• Starter architecture flutter firebase: https://codewithandrea.com/videos/2020-02-10-starter-architecture-flutter-firebase/ 

• Architecture Amplify AWS for flutter: 

  • https://medium.com/flutter-community/aws-amplify-for-flutter-ed7890f75493

  • https://github.com/aws-amplify/amplify-flutter/tree/master/example 

• Model: Convert JSON to Swift, C#, TypeScript, Objective-C, Go, Java, C++ and more 

  • https://quicktype.io/

  • https://medium.com/flutterdevs/flutter-json-to-dart-class-in-one-click-ba6d6b5f47a9 (plugin for Microsoft code)

• State management: 

  • states_rebuilder: Più semplici degli altri state management, non c'è boilerplate e utilizza classi dart semplici

    • https://medium.com/flutter-community/an-easy-and-effective-state-management-solution-for-flutter-to-achieve-100-separation-of-f3d6988c2cac

    • https://github.com/GIfatahTH/states_rebuilder 

    • https://www.youtube.com/watch?v=iIxWMeFnIKA (Tutorial)

  • https://flutter.dev/docs/development/data-and-backend/state-mgmt 

  • https://medium.com/flutter-community/creating-services-to-do-the-work-in-your-flutter-app-93d6c4aa7697  (Get_it package)

  • Link alla pagina interna con elenco passi per la creazione di un servizio riutilizzabile (Get_it package)

  • Provider: https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

  • BLoC : https://bloclibrary.dev/#/whybloc

  • BLoC - Redux comparison: https://www.didierboelens.com/2019/04/bloc-scopedmodel-redux-comparison/ 

  • MobX: 

    • https://mobx.netlify.app/concepts (Più semplice degli altri, utilizza un generatore di codice per avere del codice più leggibile)

    • https://medium.com/flutter-community/handling-api-calls-using-mobx-in-flutter-a355cf91605c (esempio completo su medium)

• Background processing: 

  • https://flutter.dev/docs/development/packages-and-plugins/background-processes

  • https://medium.com/flutter/executing-dart-in-the-background-with-flutter-plugins-and-geofencing-2b3e40a1a124

  • https://pub.dev/packages/flutter_background_geolocation  

• JSON serialization/deserialization: 

  • https://flutter.dev/docs/development/data-and-backend/json 

  • https://medium.com/@mihalkrasnov/everything-you-need-to-know-about-json-in-flutter-fb99e31a577f 

• Navigation: 

  • https://flutter.dev/docs/development/ui/navigation

  • Navigation con stack multipli: https://youtu.be/3PdUaidHc-E?t=176

• Deep Linking: navigazione da un sito web o da push notification per accedere ad una specifica area all'interno dell'app: https://pub.dev/packages/uni_links

• Link from URL, Mail: https://pub.dev/packages/flutter_linkify 

• Local storage: https://flutter.dev/docs/cookbook/persistence/key-value

• SQLite: utile per lavorare con un grosso quantitativo di dati strutturati: https://flutter.dev/docs/cookbook/persistence/sqlite

• Hive: https://pub.dev/packages/hive (sempre SQL)

• Lettura e scrittura file (file system): https://flutter.dev/docs/cookbook/persistence/reading-writing-files

• Push notification con Firebase: 

  • https://pub.dev/packages/firebase_messaging

  • https://medium.com/flutter-community/develop-a-full-fledged-global-news-flutter-app-in-a-day-part-3-ft-firebase-notifications-c72029cefc7

• Local notification:

  • https://pub.dev/packages/awesome_notifications  

  • https://pub.dev/packages/flutter_local_notifications
    https://medium.com/flutter-community/local-notifications-in-flutter-746eb1d606c6 

• Logging: https://medium.com/flutter-community/a-guide-to-setting-up-better-logging-in-flutter-3db8bab2000e 

• Painter - disegnare grafica su Canvas:

  • https://blog.codemagic.io/flutter-custom-painter/

• Help pagina iniziale, onboarging o overlay

  • https://pub.dev/packages/onboarding_overlay

• Package Collection: Tired of doing all the work on your own and just want some help dealing with lists, maps, and sets in your app? package:collection lets you check if two collections contain other collections, implement a priority queue, “Do maths”, and more!

  • https://www.youtube.com/watch?v=Ymw9xfRucK0 

• Offline: moor enhanced offline storage

  • https://medium.com/mindful-engineering/moor-enhanced-offline-storage-for-flutter-1c43036734ed 

• SDUI: generate user interface from server using JSON

  • https://ravikirandhulipala.medium.com/implementation-of-sdui-with-flutter-9cc834d20b26

Help online per App Flutter

Step by step guide (Flutter intro package):

• https://medium.com/@ttt3niu/add-step-by-step-users-guide-for-your-flutter-project-ca5471f5a203 

• https://miro.medium.com/max/956/0*i30EocOKgyTM7tY3.gif 

• https://pub.dev/packages/flutter_intro 

Ambiente di sviluppo

Developers can choose between Android Studio / IntelliJ and Visual Studio Code for their Flutter IDE as all three are very well supported on Mac, PC, Linux, and Chromebook. Building, device deployment, debugging, and performance profiling, can all be achieved within these IDEs, as well as from the command line. For native iOS platform development / deployment, Xcode on a Mac is required.

• Online

  • Codepen: https://codepen.io/topic/flutter/templates 

  • DartPad: https://dartpad.dev/ 

• Testing

  • Unit Test: https://flutter.dev/docs/testing#unit-tests

  • Widget Test: https://flutter.dev/docs/testing#widget-tests

  • Integration Test: https://flutter.dev/docs/testing#integration-tests

  • Mock Web server:  A self-contained (ie. no web requests go outside the app) demonstration version of the app is also possible using this mock web server, if a way to switch between web server endpoints is provided. For instance you could switch between a mock, test environment and pre-production test environment in the debug build of your Enterprise app. https://pub.dev/packages/mock_web_server

  • Preview App (different screen sizes): 

    • https://github.com/aloisdeniel/flutter_device_preview 

    • https://pub.dev/packages/device_preview 

• Continuous Integration / Continuous Delivery: 

  • GitHub Actions (Compilazione online)

    • https://betterprogramming.pub/ci-cd-for-flutter-apps-using-github-actions-b833f8f7aac

  • Code Magic (Compilazione online)

    • https://codemagic.io/start/

    • https://docs.codemagic.io/yaml/yaml/

    • Video Tutorial: https://www.youtube.com/watch?v=GsQ5MHHVNqQ

  • https://go.bitrise.io/flutter-ci

  • Fledge: https://medium.com/zero-equals-false/cicd-for-flutter-fdc07fe52abd 

User Interface

• VelocityX: https://pub.dev/packages/velocity_x 

• Collezione di widget pronti all'uso: https://pub.dev/packages/getwidget 

• Photo View (possibile utilizzo anche come gallery): 

  • https://pub.dev/packages/photo_view 

  • https://medium.com/flutterdevs/photoview-influtter-be29f167aa0f 

• Layout rules !!!! important: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 

• InApp Web View: https://pub.dev/documentation/flutter_inappwebview/latest/index.html 

• Splash Screen: https://flutter.dev/docs/development/ui/advanced/splash-screen

• Android - Material Widgets: https://flutter.dev/docs/development/ui/widgets/material

• iOS - Cupertino Widgets: https://flutter.dev/docs/development/ui/widgets/cupertino

• Animations: https://flutter.dev/docs/development/ui/animations 

• Flare Vector animations: https://rive.app/, https://pub.dev/packages/flare_flutter

• Page transitions: https://flutter.dev/docs/cookbook/animation/page-route-animation

• Paging / infinite scrolling list views: 

  • https://flutter-academy.com/flutter-listview-infinite-scrolling/ (tutorial)

  • https://itnext.io/listuic-easily-build-of-list-screen-in-flutter-ecbf690a35bd 

• Image loading / caching library: https://pub.dev/packages/cached_network_image

• Google Maps e Apple Maps: https://pub.dev/packages/flutter_maps

• Mappe Vettoriali MapBox: https://pub.dev/packages/mapbox_gl

• Flutter MapBox Integration: Complete Guide with Example https://dhruvnakum.xyz/flutter-mapbox-integration-complete-guide-with-example

• Webview (beta): https://pub.dev/packages/webview_flutter

• Internazionalizzazione: https://flutter.dev/docs/development/accessibility-and-localization/internationalization

• Accessibilità: https://flutter.dev/docs/development/accessibility-and-localization/accessibility

• Grafici: 

  • https://pub.dev/packages/charts_flutter

  • https://pub.dev/packages/fl_chart 

• Selezione dinamica Temi: https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3

• Responsive: 

  • https://www.didierboelens.com/2020/05/responsive-bootstrap-like-solution/ 

  • https://renuvkelkar.medium.com/responsive-flutter-ui-using-velocityx-3447e50e18da 

• Row and Column: https://medium.com/@greg.perry/decode-row-column-8b88ad2d758c

• Neumorphism Payment App UI - Speed Coding: https://m.youtube.com/watch?v=HkU447RWCXs

• Neumorphism Soft UI Design In Flutter: https://www.youtube.com/watch?v=PsvvJSl37Bc&app=desktop 

• Neumorphic design package: https://pub.dev/packages/neumorphic

• Neumorphic design with flutter: https://medium.com/flutter-community/neumorphic-designs-in-flutter-eab9a4de2059

• Flutter Launcher Icons: Creazione automatica delle icone per l'app - https://pub.dev/packages/flutter_launcher_icons

• SpinKit: Spinner, loaders - https://pub.dev/packages/flutter_spinkit

• Audio player: https://pub.dev/packages/audioplayer (può funzionare anche assieme al servizio audio service per background audio, vedi sotto)

• Video Player:

  • https://pub.dev/packages/video_player (core component)

  • https://pub.flutter-io.cn/packages/chewie (widget che utilizza video_player, ma con controllo play del video tramite pulsanti, slidebar etc... )

• Effetto sfoglia pagina: https://pub.dev/packages/page_turn

• Layout cheat sheet: https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

• Rive -Animazioni: https://rive.app/ 

• Interessante, per creare assistenti e chat-bot: https://github.com/aniketambore/assistant_spirit 

• Stepper: https://pub.dev/packages/im_stepper/example 

• List view ordinabile: https://youtu.be/0bRv3mNCj8o 

• Esempio app completa con interessante UI: https://github.com/abuanwar072/Production-Ready-Doctor-Consultant-App-UI- 

• HTML Editor: https://pub.dev/packages/html_editor_enhanced 

Accesso a funzionalità hardware

• Camera: https://flutter.dev/docs/cookbook/plugins/picture-using-camera

• Autenticazione biometrica (incluso fingerprint e Face ID): https://pub.dev/packages/local_auth

• GPS: https://pub.dev/packages/geolocator

• Accelerometer: https://pub.dev/packages/sensors

• NFC: https://pub.dev/packages/nfc_in_flutter (Note that only a subset of NFC tags is supported, and NFC application usage is highly restricted on the iOS platform by Apple design, not specifically due to Flutter

• Video Player (Chewie Tutorial)

  • https://youtu.be/XP-4BiWsuaQ 

• Riconoscimento immagini (Tensor Flow)

  • https://pub.dev/packages/tflite

  • https://heartbeat.fritz.ai/turning-the-mobile-camera-into-a-real-time-object-detector-with-flutter-and-tensorflow-lite-f412962b1805

• Riconoscimento vocale (Picovoice)

  • https://medium.com/picovoice/offline-speech-recognition-in-flutter-no-siri-no-google-and-no-its-not-speech-to-text-c960180e9239

• AudioPlayer / Recorder

  • https://youtu.be/Bxn8k9F5JiM 

Security

• HTTPS: https://flutter.dev/docs/cookbook/networking/fetch-data

• Simple Auth: https://pub.dev/packages/simple_auth_flutter

  • Azure, Amazon, Dropbox, Facebook, Github, google, Instagram, LinkedIn, Microsoft Live Connect

  • Qualsiasi server con OAuth2/Basic Auth

  • Amazon ha inoltre il suo SDK per Cognito: https://pub.dev/packages/amazon_cognito_identity_dart

• SSL certificate pinning: https://www.owasp.org/index.php/Certificate_and_Public_Key_Pinning (plugin: https://pub.dev/packages/ssl_pinning_plugin)

• Difficulty of reverse engineering: Flutter Dart code compiles down to ARM binary code so it is slightly more challenging to reverse engineer than Android byte code. This can be further “enhanced” by using a technique such as code obfuscation.

• Secure Storage: provides a way to securely store small amounts of key / value information on the device. https://pub.dev/packages/flutter_secure_storage

Produttività

• faker package - crea API per test

• 
  

Altro

• Flutter community Widgets

  • https://pub.dev/packages?q=publisher%3Afluttercommunity.dev&page=2 

• Analytics:

  • Adobe: https://pub.dev/packages/adobe_mobile_sdk_flutter 

  • Firebase: https://pub.dev/packages/firebase_analytics 

• Crash Reporting:

  • Sentry Library: https://flutter.dev/docs/cookbook/maintenance/error-reporting

  • Firebase crashalitics

• Generate and scan QRCodes

  • https://medium.com/flutter-community/building-flutter-qr-code-generator-scanner-and-sharing-app-703e73b228d3

• Access to personal contact list

  • https://pub.dev/packages/contacts_service

• Share details with social media

  • https://pub.dev/packages/social_share_plugin

• Send SMS and receive SMS for one time passcodes:

  • https://pub.dev/packages/flutter_sms

  • https://pub.dev/packages/sms_autofill

• Make in-app payments

  • https://developer.squareup.com/docs/in-app-payments-sdk/flutter

  • https://pub.dev/packages/flutter_billing

  • https://pub.dev/packages/flutter_inapp_purchase

• Play audio music video (media player):

  • https://pub.dev/packages/audioplayer

  • https://flutter.dev/docs/cookbook/plugins/play-video

  • https://pub.dev/packages/miniplayer 

• Video/Audio Manipulation

  • https://pub.dev/packages/flutter_ffmpeg

  • https://github.com/dooboolab/flutter_sound 

• Read user’s health information

  • https://pub.dev/packages/fit_kit

• Machine learning on device and in the cloud.

  • https://pub.dev/packages/tflite/versions/0.0.1

  • https://pub.dev/packages/mlkit

• File Picker

  • https://pub.dev/packages/file_picker

• Puzzle Game

  • https://github.com/dragosholban/flutter_puzzle

• Accesso a Google Drive:

  • https://betterprogramming.pub/the-minimum-guide-for-using-google-drive-api-with-flutter-9207e4cb05ba

• Upload File (Firebase):

  • https://firebase.google.com/docs/database/flutter/offline-capabilities

  • https://firebase.google.com/docs/storage/flutter/upload-files?hl=en

ARCore (realtà aumentata)

• https://medium.com/krootl/arcore-sceneform-video-scale-n-rotation-362a3b5de4dc 

• https://proandroiddev.com/building-arcore-apps-using-sceneform-part-1-b9e57d1057e6 

• https://proandroiddev.com/arcore-cupcakes-3-understanding-vector3-93ec6bd08071 

• https://proandroiddev.com/arcore-cupcakes-4-understanding-quaternion-rotations-f90703f3966e 

• https://github.com/Hariofspades/ARExperiments 

• https://medium.com/@ashmikattel/arcore-in-flutter-f0115fbdbbc2 

Filtri AR (like snapchat)

• https://medium.com/flutter-community/easiest-steps-to-build-a-face-filter-app-with-flutter-and-deep-ar-c020037d893d 

Packages

Developing packages:

• https://flutter.dev/docs/development/packages-and-plugins/developing-packages

i18n - simple json files, one for each language that you want to support:

• https://pub.dev/packages/flutter_i18n

Preferences (options key value pair)

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

• https://flutter.dev/docs/cookbook/persistence/key-value (tutorial)

Provider for state management:

• https://pub.dev/packages/provider

Http Requests:

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

Cached Network images:

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

Flutter Map - A Dart implementation of Leaflet for Flutter apps.

• https://pub.dev/packages/flutter_map

Local Messages:

• https://pub.dev/packages/flutter_local_notifications

• https://medium.com/flutter-community/local-notifications-in-flutter-746eb1d606c6 

Barcode Scanner:

• https://pub.dev/packages/barcode_scan

Beacon iBeacon (Android/iOS) simple to use:

• https://github.com/umair13adil/simple_beacons_flutter

Render HTML Text:

• https://pub.dev/packages/flutter_html

Checking connection status - Offline:

• https://pub.dev/packages/connectivity

Flutter Cache Manager - Offline:

• https://pub.dev/packages/flutter_cache_manager

• https://medium.com/flutter-community/offline-first-with-flutter-be1e8335d976

Cache for DIO package - Offline

• https://pub.dev/packages/dio_cache

• https://fluttercentral.com/Articles/Post/1259/Download_Files_in_Flutter_with_Progress_using_Dio 

Serial connection (Android) useful for Arduino Projects:

• https://github.com/BbsonLin/serial_port_flutter 

• https://pub.dev/packages/usb_serial 

MQTT client - for Arduino (WiFi/MKR1010) & Other IoT Projects:

• https://pub.dev/packages/mqtt_client

Cloud firestore:

• https://pub.dev/packages/cloud_firestore

Tesla (Control and monitor Tesla Products in Dart):

• https://github.com/TeslaToolkit/tesla.dart

Configuration package:

BLE (Flutter library that handles BLE operations for multiple devices):

• https://pub.dev/packages/flutter_reactive_ble (try this)

• https://pub.dev/packages/flutter_ble_lib

Audio Services - audio in background o quando lo schermo è spento: 

• https://pub.dev/packages/audio_service 

Best Visual Studio code extension:

• https://ricardo-castellanos-herreros.medium.com/10-best-visual-studio-code-extensions-for-flutter-development-c94a4e9a7a05

Articles

https://medium.com/flutter-community/inappwebview-the-real-power-of-webviews-in-flutter-c6d52374209d 

https://medium.com/flutter/how-to-debug-layout-issues-with-the-flutter-inspector-87460a7b9db 

https://medium.com/@marziani/lighting-and-shadows-in-augmented-reality-635f30fb81cb 

https://medium.com/inc./the-5-best-new-productivity-features-in-ios-14-3db30d868b02 

https://uxdesign.cc/game-ui-and-ux-design-in-game-character-conversational-experiences-992e4f5f1f6f 

https://medium.com/google-cloud/interactive-canvas-build-immersive-games-for-google-assistant-part-1-351156a5f7d3 

https://entrepreneurshandbook.co/what-i-learned-building-an-online-course-that-sold-out-in-10-days-43a59334483b 

https://medium.com/the-ascent/learn-about-the-purchasing-power-of-money-if-you-want-to-become-rich-8873a3913d48 

https://medium.com/better-programming/lazy-loading-data-from-firestore-in-real-time-using-flutter-baa4157462fe 

Flutter Animated UI:

https://codingwithtashi.medium.com/flutter-animated-ui-8d3b5617d94c