El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Flutter Web és una extensió del framework Flutter que permet desenvolupar aplicacions web utilitzant el mateix codi base que s'utilitza per a aplicacions mòbils. Aquesta capacitat de reutilitzar el codi facilita la creació d'aplicacions multiplataforma amb una única base de codi, estalviant temps i recursos.

Objectius d'aquest Tema

Comprendre què és Flutter Web i les seves capacitats.
Aprendre a configurar l'entorn per desenvolupar aplicacions web amb Flutter.
Crear una aplicació web bàsica amb Flutter.

Què és Flutter Web?

Flutter Web permet als desenvolupadors crear aplicacions web interactives i responsives utilitzant el mateix framework que s'utilitza per a aplicacions mòbils. Algunes de les característiques clau de Flutter Web inclouen:

Reutilització de Codi: Utilitza el mateix codi base per a aplicacions mòbils i web.
Renderització Ràpida: Utilitza el motor de renderització de Flutter per proporcionar una experiència d'usuari fluida.
Components UI Consistents: Els widgets de Flutter es comporten de la mateixa manera en totes les plataformes.

Configuració de l'Entorn per a Flutter Web

Requisits Previs

Abans de començar, assegura't de tenir instal·lats els següents components:

Flutter SDK
Dart SDK
Un editor de codi (recomanat: Visual Studio Code o IntelliJ IDEA)

Passos per Configurar l'Entorn

Actualitza Flutter a la Versió Més Recent:
```
flutter upgrade
```
Activa el Suport per a Web:
```
flutter config --enable-web
```

Crea un Nou Projecte Flutter:

flutter create my_flutter_web_app
cd my_flutter_web_app

Executa l'Aplicació en un Navegador:
```
flutter run -d chrome
```

Creació d'una Aplicació Web Bàsica amb Flutter

Estructura del Projecte

Un projecte Flutter Web té una estructura similar a un projecte Flutter mòbil. La diferència principal és la presència d'una carpeta web que conté els fitxers específics per a la web.

Exemple de Codi

A continuació, es mostra un exemple senzill d'una aplicació Flutter Web que mostra un text al centre de la pantalla.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web Demo'),
      ),
      body: Center(
        child: Text(
          'Hola, Flutter Web!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Explicació del Codi

main(): La funció principal que inicia l'aplicació.
MyApp: Un widget sense estat que configura el tema de l'aplicació i defineix la pàgina inicial.
MyHomePage: Un widget sense estat que defineix la interfície d'usuari de la pàgina inicial, incloent una barra d'aplicació i un text centrat.

Exercici Pràctic

Exercici

Crea una aplicació Flutter Web que mostri un botó al centre de la pantalla. Quan es faci clic al botó, el text del botó ha de canviar a "Has fet clic!".

Solució

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String buttonText = "Fes clic aquí";

  void _updateText() {
    setState(() {
      buttonText = "Has fet clic!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web Button Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _updateText,
          child: Text(buttonText),
        ),
      ),
    );
  }
}

Explicació del Codi

_MyHomePageState: Un widget amb estat que manté el text del botó.
_updateText(): Una funció que actualitza el text del botó quan es fa clic.
ElevatedButton: Un botó elevat que crida _updateText quan es prem.

Conclusió

En aquesta secció, hem après què és Flutter Web, com configurar l'entorn de desenvolupament i com crear una aplicació web bàsica amb Flutter. Amb aquests coneixements, estàs preparat per explorar més funcions avançades de Flutter Web i crear aplicacions web més complexes.

Introducció a Flutter Web

Objectius d'aquest Tema

Què és Flutter Web?

Configuració de l'Entorn per a Flutter Web

Requisits Previs

Passos per Configurar l'Entorn

Creació d'una Aplicació Web Bàsica amb Flutter

Estructura del Projecte

Exemple de Codi

Explicació del Codi

Exercici Pràctic

Exercici

Solució

Explicació del Codi

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori