cifo_flutter

Activitats i aplicacions del curs de Flutter al CIFO de l'Hospitalet 2024.

Cada carpeta és una aplicació independent que conté un README.md amb detalls de l'aplicació corresponent.

• Importar una aplicació
  • Desenvolupament a IDX
  • Desenvolupament local
• Recursos
  • Documentation
  • Code examples
  • Apps and Widgets examples
  • State management
  • Packages
  • Icons
  • Fonts
  • Design
    • Colors
    • Inspiration
  • Testing
  • Release
  • Other
• CLI
  • Doctor
  • Dependències
  • Configuració
  • Linter
  • Dispositius
  • Connexió inal·làmbrica (Android)
  • Build
  • CORS
  • Clean
  • Dart
• (Dev) Afegeix una aplicació

Importar una aplicació

Desenvolupament a IDX

Les aplicacions es poden importar directament al IDE web Project IDX.

Al repositori de cada aplicació hi ha un botó Open in IDX per importar el repositori a IDX i provar o modificar l'aplicació sense haver d'instal·lar-la en local. Recordeu seleccionar "This is a Flutter app".

Un cop s'hagi importat l'aplicació espereu a que carregui l'entorn i s'executi l'aplicació al web i a l'emulador Android.

Desenvolupament local

Es pot importar una aplicació individual clonant el seu repositori independent o totes alhora.

Per clonar només una aplicació, accedeix a la carpeta de l'aplicació desitjada, amb instruccions d'instal·lació individuals.

Per clonar aquest repositori amb totes les aplicacions com a submòduls, executa les següents comandes:

git clone --recurse-submodules https://github.com/Carleslc/cifo_flutter.git cifo_flutter
# GitHub CLI: gh repo clone Carleslc/cifo_flutter cifo_flutter -- --recurse-submodules

# Per actualitzar el repositori
git pull --recurse-submodules --all

Després accedeix a l'aplicació desitjada:

cd activitat_1_generador_noms

Instal·la les dependències:

flutter pub get

Es pot executar l'aplicació amb flutter run o desde l'IDE.

Recursos

Documentation

• API Docs
• Flutter Docs
• Dart Style Guide
• Material Widgets
• Cupertino Widgets
• Layouts in Flutter
• Navigation
• Assets and images
• Asynchronous programming
• Networking
• JSON Serialization
• Persistence
• Responsive design
• Animations and transitions
• Accessibility
• Internationalization

Code examples

• Cookbook: Useful Flutter samples
• Codelab: Write your first Flutter app
• Navigation
• Themes
• JSON Serialization (json_serializable)

Apps and Widgets examples

• YouTube: Flutter Widget of the Week
• Flutter Samples
• flutter_catalog (web)
• flutter-examples
• material_3_demo
• Snackbar
• Dialog
• Drawer / NavigationDrawer
• BottomNavigationBar / NavigationBar
• SafeArea & MediaQuery
• ThemeData (ColorScheme, TextTheme)
• FutureBuilder
• Introduction Screen

State management

• Managing state
• Simple app state management
• Stateless vs. Stateful widgets
• Widget Lifecycle (2) (3)
• When to use Keys
• Provider
• Riverpod (riverpod) (tutorial)

Persistence

• Store key-value data on disk (shared_preferences)
• Read and write files (path_provider)
• Persist data with SQLite (sqflite)
• Persist data with Isar NoSQL (isar)

Packages

• pub.dev
• Flutter Gems

Icons

• Material Symbols +info (material_symbols_icons)
• Material Icons
• Material Community Icons (community_material_icon)
• Freepik Icons

Fonts

• Google Fonts (google_fonts)
• Font Space
• MixFont

Design

• Figma (Material Theme Builder)
• Proto.io
• marvelapp
• sketchize

Colors

• Coolors
• Picular

Inspiration

• Dribbble
• Mobbin
• Android Niceties

Testing

• Testing Documentation
• Mocking

Security

• .env management: flutter_dotenv

Authentication

• Firebase Authentication
• Firebase Authentication in Flutter
• Tutorial: Flutter Registration & Login using Firebase
• Firebase UI Auth: firebase_ui_auth

Cloud Storage

• Firebase Cloud Storage
• Firebase Cloud Storage in Flutter

Push Notifications

• Add Firebase to Flutter app
• Firebase Cloud Messaging

Analytics

• Firebase Analytics in Flutter
• Firebase Crashlytics in Flutter

Release

• Release Documentation (android, ios)
• Specify app name: package_rename
• App Icon (android)
  • Icon Kitchen / Android: Image Asset Studio
  • flutter_launcher_icons
• Splash Screen (android, ios)
• Bundle google_fonts for release
• Setup iOS localizations for App Store
• Video: Publishing a Flutter App to the Play Store
• Google Play: Requisitos de pruebas de aplicaciones (20 Testers)

Ads and in-app purchases

• AdMob (Codelab: AdMob ads in Flutter)
• Advertising (google_mobile_ads)
• In-app purchases
  • Codelab: In-app purchases in Flutter
  • in_app_purchase

Other

• Awesome Flutter
• JSON to DataModels
• Android API Levels
• Free APIs

CLI

Doctor

# Verifica la instal·lació de Flutter
flutter doctor

# Mostra més informació
flutter doctor -v

# Mostra la versió de Flutter i Dart
flutter --version

# Actualitza Flutter
flutter upgrade

Dependències

# Instal·la les dependències
flutter pub get

# Afegeix una dependència
flutter pub add google_fonts
flutter pub add flutter_localizations --sdk=flutter

# Actualitza les dependències
flutter pub upgrade

# Elimina una dependència
flutter pub remove google_fonts

Configuració

Activa o desactiva les plataformes suportades per flutter create:

flutter config --list
flutter config --no-enable-linux-desktop
flutter config --no-enable-macos-desktop
flutter config --no-enable-windows-desktop
flutter config --enable-android
flutter config --enable-ios
flutter config --enable-web

Linter

Al fitxer analysis_options.yaml (exemple) d'una aplicació es poden afegir regles d'estil per fer el codi més robust i llegible, segons la guia d'estil.

# Mostra els possibles problemes d'estil
dart fix --dry-run

# Corregeix els problemes d'estil trobats automàticament
dart fix --apply

Si cal ignorar el warning d'una regla determinada, es pot afegir un comentari a la línia o fitxer corresponent:

// ignore: directives_ordering
// ignore_for_file: directives_ordering

Dispositius

# Dispositius connectats
flutter devices

# Dispositius Android connectats
adb devices -l

# Captura de pantalla del dispositiu actual
flutter screenshot

# Simulador iOS (Xcode)
open -a Simulator

Connexió inal·làmbrica (Android)

Comprova la IP del dispositiu connectat per USB a la configuració del dispositiu.

# Connecta el dispositiu via TCP/IP
adb tcpip 5555
adb connect <IP>:5555

# Comproba els dispositius connectats
adb devices -l

Build

# Executa l'aplicació
flutter run # -h

Android

# APK
flutter build apk --debug
flutter build apk --release

# App Bundle
flutter build appbundle --debug
flutter build appbundle --release

# Instal·la l'aplicació al dispositiu
adb install -r build/app/outputs/flutter-apk/app-debug.apk
adb install -r build/app/outputs/flutter-apk/app-release.apk

# Instal·la l'aplicació en un dispositiu determinat (amb serial device-ID, p.e. emulator-5554)
adb -s device-ID install -r build/app/outputs/flutter-apk/app-debug.apk
adb -s device-ID install -r build/app/outputs/flutter-apk/app-release.apk

# Desinstal·la l'aplicació del dispositiu
adb uninstall com.example.demo_counter
adb -s device-ID uninstall com.example.demo_counter

iOS

flutter build ios --debug
flutter build ios --release

Web

flutter build web --debug
flutter build web --release

CORS

A vegades a la web no es mostren les imatges correctament.

Per solucionar-ho es pot canviar el mètode de renderitzat a l'hora d'executar l'aplicació:

# Debug on chrome to avoid CORS issues
flutter run -d chrome --web-renderer html

# Release for web with html renderer
flutter build web --web-renderer html --release

Per executar-ho amb Visual Studio Code afegeix la configuració de .vscode/launch.json.

Una alternativa per les imatges és utilitzar la llibreria image_network.

Clean

Esborra els directoris relacionats amb build:

flutter clean

Dart

Executa codi Dart independent:

dart --enable-asserts fitxer.dart

(Dev) Afegeix una aplicació

Per crear una nova aplicació (*):

flutter create --platform android,ios,web new_app

# Alternativament: ./create_flutter_app_idx.sh new_app

Després s'ha de pujar el codi a un nou repositori.

Per enllaçar el respositori de l'aplicació en aquest repositori:

git submodule add -b master https://github.com/Carleslc/cifo_flutter_new_app.git new_app
git submodule init && git submodule update

(*) Modificacions per IDX

Per tal de que funcioni directament a IDX s'han de fer alguns canvis:

• Afegir la carpeta .idx i el fitxer dev.nix (es pot copiar la carpeta de qualsevol altre aplicació).

• Modificar android/app/build.gradle per agafar bé els paràmetres flutter.versionCode i flutter.versionName tal i com s'utilitzen a IDX (es pot copiar de qualsevol altre aplicació, i canviar el nom del paquet de l'aplicació).

• Utilitzar al pubspec.yaml un sdk de Dart i versió de Flutter suportades per IDX (flutter --version), per exemple '>=3.4.3'.

Es pot automatitzar aquest procés de creació utilitzant el script create_flutter_app_idx.sh:

chmod +x create_flutter_app_idx.sh

./create_flutter_app_idx.sh new_app

(Dev) Table of contents

Instal·la markdown-toc:

npm install -g markdown-toc

Afegeix aquesta línia al README on es vol insertar:

<!-- toc -->

Genera el Table of contents:

markdown-toc -i README.md

Nota: Els enllaços a GitHub accepten accents, sense ells poden no funcionar.