Local blog for Italian speaking developers
Il supporto Web per Flutter passa alla beta
30 dicembre 2019
Pubblicato da Mariam Hasnany, Product Manager, Flutter
Siamo lieti di annunciare che il supporto Web per Flutter è ora in versione beta!
Perché abbiamo portato Flutter sul Web?
Gli sviluppatori creano app che devono funzionare sia su dispositivi mobili sia sul Web. Per noi è importante che tu possa progettare e creare ciò che desideri, avendo la certezza che Flutter funzionerà perfettamente ovunque tu ne abbia bisogno. Come sviluppatore, è auspicabile apprendere un singolo insieme di competenze che possono essere facilmente trasferite su più piattaforme. Il supporto Web per Flutter consente agli sviluppatori di utilizzare lo stesso codice, trasferire funzionalità più velocemente e garantire coerenza nelle esperienze offerte su tutti i dispositivi. Inoltre, un potente compilatore Dart per il Web e un'architettura Flutter progettata pensando alla portabilità facilitano la creazione di fantastiche esperienze Web interattive utilizzando Flutter.
Più di una semplice anteprima
Da quando abbiamo rilasciato il supporto Web come
anteprima tecnica
al Google I/O quest'anno e dall'inizio del
programma per primi utenti
a luglio, abbiamo lavorato duramente per supportare il crescente interesse nell'ampliare il supporto Web di Flutter a Google e al pubblico più ampio.
Quindi, cosa significa beta per il Web?
Con la versione 1.12 di Flutter, il supporto Web di Flutter passa dall'anteprima tecnica alla beta. Quando sei sul canale beta e hai abilitato il supporto Web, la creazione di un nuovo progetto Flutter non include solo le app host Android e iOS, ma ora anche una directory web/ che contiene tutto il necessario per compilare ed eseguire lo stesso codice del progetto in un browser.
Riteniamo che il supporto Web di Flutter stia iniziando ad essere più stabile e gli sviluppatori più avventurosi possono iniziare a utilizzarlo per diversi scenari. Mentre passiamo alla prossima fase di sviluppo, continueremo ad apportare modifiche e a migliorare l'accessibilità, la copertura dei test e altro ancora.
Scenari da provare
Durante lo sviluppo del supporto Flutter per l'esecuzione sul Web, ci siamo concentrati in particolare su una serie di scenari che riteniamo siano adatti alle caratteristiche di Flutter. Riteniamo che il nostro set di funzionalità sia abbastanza completo da consentire agli sviluppatori di creare esperienze Web interattive e avanzate. Lavorando con i nostri primi utenti partner, abbiamo convalidato e perfezionato il supporto per i seguenti scenari.
App autonoma connessa
Flutter può consentire agli sviluppatori di creare un'unica app dallo stesso codice per esperienze mobile e su browser.
Journey
, uno dei nostri primi utenti, ha utilizzato Flutter per creare un'app multipiattaforma.
Journey, un'app social, ha recentemente lanciato un'app multipiattaforma utilizzando Flutter
Luke O'Brien, fondatore di Journey, afferma "
Quattro mesi fa stavo per creare Journey solo per Android per MVP. Ho scoperto Flutter e ho pensato: "È troppo bello per essere vero", ma ho deciso di provare. È stata la decisione migliore che abbia mai preso in vita mia. Flutter ha dimezzato i tempi di sviluppo (probabilmente più che dimezzato) e ora lo abbiamo lanciato su Android, iOS e Web, raddoppiando il potenziale di crescita degli utenti. È difficile descrivere a parole l'impatto che Flutter ha avuto nel trasformare la mia visione in realtà."
Contenuti interattivi incorporati
Uno scenario consiste nell'incorporare una mini app ricca e incentrata sui dati in un sito principale; non sono necessari servizi di navigazione o altre funzionalità simili a quelle delle app. Incorporare un nuovo configuratore di auto, un cruciverba o visualizzazioni interattive di dati in un sito Web esistente sono solo alcuni esempi chiave che si adattano a questo scenario. La
vetrina di chatbot di AEI Studio
, uno dei nostri primi utenti, ha incorporato Flutter nella finestra di dialogo della chat Web che mostrava animazioni, immissione di testo tramite tastiera e altro ancora.
Weatherbot è uno dei chatbot di AEI Studio che ha incorporato Flutter nella finestra di dialogo della chat Web
App lite
Anche se il runtime mobile personalizzato di Flutter è in grado oggi di offrire un'esperienza più fluida, a volte l'installazione delle app impedisce agli utenti di iniziare a utilizzarle rapidamente. Un'app Flutter esistente con un'esperienza Web leggera offre alle aziende il meglio di entrambi i mondi. Sebbene l'uso principale dell'app sia su dispositivo mobile, un'app Web lite potrebbe fornire un'esperienza meno ricca di funzionalità, ma con funzionalità correlate utilizzando strumenti, framework, componenti UI e logica di business identici.
App companion
Un'app companion è un'esperienza Web creata utilizzando Flutter per supportare la tua app mobile di uso principale. Ad esempio, utilizzare Flutter per creare un'app Web che consenta agli amministratori o agli utenti interni di creare contenuti o gestire il backend per l'app mobile Flutter esistente. Sebbene questa app Web sia considerata un'esperienza separata, può sfruttare buona parte del codice dell'app mobile.
Sono disponibili i plug-in!
Flutter ha un concetto di plug-in, che consente di parlare con le librerie native per la piattaforma che stai utilizzando. Quando esegui l'app Flutter sul Web, puoi ottenere l'accesso completo alle librerie JS esistenti. Tutto il codice JS-interop viene gestito dietro le quinte e il plug-in funziona come previsto sia su dispositivo mobile sia sul Web. Abbiamo già implementato molti dei plug-in più richiesti in modo che funzionino in modo coerente nelle app native e su Web. Ora puoi anche
scrivere i tuoi plug-in
, come hanno fatto
Ben Hagan
per video_player e
Hadrien Lejard
per il pacchetto sentry
.
Sono aggiornati i seguenti pacchetti:
shared_preferences
firebase_core
firebase_auth
google_sign_in
url_launcher
video_player
sentry
Abbiamo anche aggiunto nuovi tag e filtri per la piattaforma nel repository del pacchetto pub.dev.
Innanzitutto, nella pagina dei dettagli del pacchetto, sono elencate quali piattaforme supporta il pacchetto. Ciò consente di identificare facilmente se un pacchetto ha supporto Web.
Pagina dei dettagli del pacchetto pub.dev che mostra i tag di compatibilità di piattaforma e SDK
Anche la UI di ricerca ha nuovi filtri, quindi puoi trovare i pacchetti con supporto Web. Tutto questo si basa sui nuovi
tag manifest della piattaforma
ora disponibili in Flutter 1.12.
UI di ricerca pub.dev che mostra il supporto di filtro piattaforma e SDK
Il percorso verso la versione stabile
Abbiamo fatto molti progressi con la beta, ma abbiamo ancora molto lavoro da fare. Il nostro lavoro sulle prestazioni non è completo e stiamo lavorando per ampliare il nostro ambito di accessibilità, compatibilità del browser e altro ancora.
Accessibilità
Abbiamo supporto per l'accessibilità sui browser per dispositivi mobili tramite TalkBack su Android e VoiceOver su iOS. Alcune delle funzionalità che sono già implementate per le tecnologie assistive su più piattaforme includono elementi come UI traversal e traversal order, segnali di interazione UI come tappable, label, editable, incremental, image, live region e checkable.
Inoltre, stiamo lavorando per aggiungere il supporto dello screen reader per i browser Web desktop.
Supporto browser
Man mano che Flutter si evolve da un framework solo per dispositivi mobili fino a coprire anche gli idiomi UX desktop, il supporto di Flutter per i browser Web desktop migliorerà e sembrerà più fluido. Abbiamo in programma di supportare e testare Chrome, Edge, Firefox e Safari su browser desktop e mobile.
Copertura dei test
Dall'anteprima abbiamo aumentato la copertura dei test sia sul framework sia sul motore Web Flutter. Ad oggi, eseguiamo test automatizzati su Chrome e testiamo manualmente Safari. C'è ancora molto lavoro da fare e possiamo imbatterci in regressioni in scenari non testati.
Prova il supporto Web di Flutter, contribuisci e condividi!
Ora è il momento perfetto per provare il supporto Web di Flutter! Vai su flutter.dev/web per iniziare e trovare esempi, documentazione e altro ancora. Se hai già sperimentato il supporto Web di Flutter, puoi
passare al canale beta
.
Oggi sono disponibili oltre 1.800 plug-in Flutter; tuttavia, la maggior parte sono per iOS o Android. Puoi aiutare a colmare il divario tra mobile e Web aggiungendo supporto Web ai plug-in esistenti o creando il tuo plug-in. Come guida, abbiamo pubblicato un articolo su
come scrivere un plug-in Web
.
Pensieri finali
Speriamo che tu sia entusiasta che il supporto Web di Flutter stia avanzando verso il canale beta e che comprenda tutto il nostro impegno per ottenere una versione di qualità del supporto Web da rilasciare in produzione.
Siamo
lieti di ricevere feedback
e speriamo che condividerai ciò su cui stai lavorando utilizzando l'hashtag #Flutter. Non vediamo l'ora di vedere come stai usando Flutter per creare splendide esperienze Web interattive!
Etichette
Android
Firebase
machine learning
Google Cloud Platform
GDL
Eventi
Google Developers Live
Google Play
TensorFlow
App
Chrome
Cloud
api
GDLItalia
GDE
GDG
Google Assistant
iOS
Kotlin
Actions on Google
Deep Learning
AppEngine
AMP
BigQuery
Cloud Functions
Flutter
Android Studio
Google Developers Expert
Università
Google AppEngine
JavaScript
AI
Android Wear
GAE
Google Play Store
HTML5
Maps
security
Android App Development
AngularJS
IoT
Kubernetes
Annunci
Cloud Firestore
Cloud Machine Learning
Google I/O
Polymer
Android Things
Community
DevTools
Google App Engine
intelligenza artificiale
Entrepreneurship
Firebase Analytics
GSoC
Games
Google Cast
ML
open source
Crashlytics
Dart
Diversity
Drive
Google Data Studio
Google Play Games
TensorFlow Lite
Android Developers
Android O
Cloud Spanner
Cloud TPU
Compute Engine
DevFest
Google Compute Engine
Google Developers
Material Design
Mobile
PWA
Python
Startup
AIY Project
ARCore
Android Jetpack
AndroidDev
Androidq
Apps Script
Artificial Intelligence
Augmented Reality
Firebase Cloud Messaging
Google Cloud
Google Maps
Gsuite
IO19
ML kit
Research
VR
coding
unity
#io19
AR
Android Dev Summit
Android Developer
Android Q
Cardboard
Cloud AI
Coral
Developers
Dialogflow
Firebase Realtime Database
Gmail
Google AI
Google Cloud Messaging
Google ContainerEngine
Google Play Console
Kotlin Coroutines
NLP
Programming
Responsive Design
TensorFlowjs
Testing
WTM
Women
beacons
cloud storage
developer
node JS
student programs
women techmakers
API Cloud Vision
Add-ons
Android P
AndroidDevStory
Animation
AutoML
Brillo
Classroom
DSC
Database
Developer Student Clubs
Edge TPU
Fabric
Featured
Flutter Web
G Suite
GWT
GoLang
Google
Google Brain
Google Cloud Next
Google Container Engine
Google Developer Groups
Google I/O Extended
Graph
Hosting
Instant Apps
Keras
Livedata
Mobile Sites
Prediction
Privacy
Project Tango
SDK
Stackdriver
Tales
UI
Udacity
Virtual Reality
Web
Web Development
YouTube
analytics
android security
api.ai
courses
google io
indies
natural language processing
reti neurali
sign-in
young developers
2d Animation
3d
AIY
ARkit
Adversarial Learning
Alpha
Android App
Android App Developmen
Android App bundle
Android Architecture
Android Architecture Components
Android Auto
Android Automotive OS
Android Dev Summit Android Developer
Android Developer Challenge
Android Developers GooglePlayAwards
Android Development
Android Go
Android Instant App
Android Pie
Android Q Scoped Storage
Android Q audio
Android Styles
Android audio playback capture
Android codelabs
AndroidTV
AndroidX
Angular
Aogdevs
Api Design
App Development
App Distribution
Apps
Architecture
Architecture Components
Arduino
Best Practices
Betatesting
Bugs
C++
Certification
Cloud Anchors
Cloud Next
Cloud Run
Cloud Service Platform
Cloud Shell
Cloud Study Jam
Coached Conversational Preference Elicitation
Commerce
Community Connector
Computer Science
Consistency
Containers
Converge
Conversation Design
Crash Reporting
DLS Design
Dagger
Data Science
Databases
Dependency Injection
Design
Developer Communities
Developer Community
Developer Culture
Developer Story
Developing Media Apps
Development
Eager
Edge TPU Dev Board
Education
Emulatore Android
Error Message
Eslint
Europe
Firebase Extensions
Firebase Summit 2019
Firebasehosting
Flutter 1.5
Flutter at IO
FlutterDark
GCE
GDD
Game Development
Gboard
Gesture Navigation
Glass
Go
Google AI Quantum
Google App Script
Google Cloud Functions
Google Cloud billing
Google Coral
Google Developer Days
Google Home Hub
Google IOS Android
Google Identity Platform
Google Launchpad
Google Lens
Google Now
Google Photos
Google Play Devs
Google Play Indie Games Festival
Google Play Instant
Google Plus
Google codelabs
Google+
GoogleDevWeekly
GoogleLaunchpad
GooglePlay
Graphics
Healthcare
I/O
IO
IO19 Flutter
In-app Billing
Indie Games
Indie Games Festival
Indie games showcase
Indie showcase
Ingress
Instant Games
Issues
Java
Jetpack
Knative
Kotlin Beginners
Kotlin Everywhere
Kotlin codelabs
Lighthouse
Live Caption
Live Streaming
Localization
Location
M-Theory
Mondaygram
Monetization
NYT
NativeScript
Navigation
Neural Graph Learning
Neural Structured
Nodejs
OS
OS Updates
Olivex
One Time Codes
Online Education
PHA
Performance Monitoring
Policy
Posenet
Project Mainline
Project Treble
Quantum Computing Theory
Reactive Programming
Regression
Remote Config
Resonance Audio
Room
Scoped Storage
Semantics
Semi Supervised Learning
Serverless
Sms Retriever Api
Sms Verification
Speech Recognition
Swift
Tensorflow Core
Tensorflow Hub
Test Lab
Text
Tokenizer
Tpu
Transformers
UX
UX Design
UX Research
Universal Sentence Encoder
Unsupervised Data Augmentation
Unsupervised Learning
User Experience
Viewmodel
Voice
WWW
Wear OS
WebAssembly
Widget
Women in Tech
WomenTechmakers
android kotlin
app stability
assistant
audio recording
augmented faces
authsub
best practices and updates
billing
botnet
business
c++ games
cancer
chatbot
chrome privacy
codelab
codelabs
competition
daydream
designer
dominio .dev
error handling
event
firebase games
firebase gdc
firebase hosting
firebase unity
game center authentication
game testing
games authentication
gdc
google summer of code
googledevelopers
grow
hashcode
indie
indie developers
internship
kids
machine intelligence
machine learning accelerator
maker
multi-platform
nearby
oauth
openid
performance
persistent AR
privacy sandbox
prizes
prototype
purchase flows
queries
realtime
responsible AI
security rules
showcase
solutions challenge
startup africa roadtrip
startup times
students
summer of code
unity crashlytics
verify apps
win
Archivio Blog
2020
feb
gen
2019
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2018
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2017
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2016
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2015
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2014
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2013
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
Feed
Follow @GoogleDevsItaly