El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Construcció d'Aplicacions Web

Següent ►
►

En aquest tema, aprendrem com construir aplicacions web utilitzant Flutter. Flutter no només permet crear aplicacions mòbils, sinó que també ofereix suport per a aplicacions web, permetent als desenvolupadors utilitzar el mateix codi base per a múltiples plataformes.

  1. Introducció a Flutter Web

1.1. Què és Flutter Web?

Flutter Web és una extensió del framework Flutter que permet compilar aplicacions Flutter en aplicacions web que es poden executar en qualsevol navegador modern. Això significa que pots utilitzar el mateix codi que utilitzes per a les aplicacions mòbils per crear aplicacions web.

1.2. Avantatges de Flutter Web

  • Codi Únic: Utilitza el mateix codi per a aplicacions mòbils i web.
  • Rendiment: Ofereix un rendiment proper al natiu gràcies a la compilació a JavaScript.
  • Interfície d'Usuari Consistent: Manté una interfície d'usuari consistent a través de diferents plataformes.

  1. Configuració de l'Entorn per a Flutter Web

2.1. Requisits Previs

  • Flutter SDK: Assegura't de tenir instal·lat el Flutter SDK.
  • Editor de Codi: Recomanem Visual Studio Code o Android Studio amb els plugins de Flutter.

2.2. Instal·lació de les Eines Necessàries

  1. Actualitza Flutter: Assegura't que tens la darrera versió de Flutter. 
    flutter upgrade
  2. Activa Flutter Web: 
    flutter config --enable-web
  3. Verifica la Instal·lació: 
    flutter devices
    Hauries de veure una sortida similar a: 
    3 connected devices:

Web Server (web) • web-server • web-javascript • Flutter Tools
Chrome (web)     • chrome     • web-javascript • Google Chrome 89.0.4389.82
Edge (web)       • edge       • web-javascript • Microsoft Edge 89.0.774.57

  1. Creació d'una Aplicació Web amb Flutter

3.1. Crear un Nou Projecte

  1. Crea un nou projecte Flutter: 
    flutter create my_web_app
  2. Navega al directori del projecte: 
    cd my_web_app

3.2. Executar l'Aplicació en un Navegador

  1. Executa l'aplicació: 
    flutter run -d chrome
    Això obrirà l'aplicació en el navegador Chrome.

3.3. Modificar el Codi per a la Web

El codi per a una aplicació web en Flutter és molt similar al d'una aplicació mòbil. Aquí tens un exemple bàsic:

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 Home Page'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter Web!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

3.4. Desplegament de l'Aplicació Web

  1. Compila l'aplicació per a producció:

    flutter build web

    Això crearà una carpeta build/web amb els fitxers necessaris per a la teva aplicació web.

  2. Desplega els fitxers en un servidor web. Pots utilitzar qualsevol servidor web com Apache, Nginx o fins i tot serveis d'allotjament com Firebase Hosting.

  1. Exercicis Pràctics

Exercici 1: Crear una Aplicació Web Bàsica

  1. Crea una nova aplicació Flutter.
  2. Modifica el codi per mostrar un missatge de benvinguda.
  3. Executa l'aplicació en un navegador.

Exercici 2: Afegir Interactivitat

  1. Afegeix un botó a la teva aplicació que canviï el text quan es prem.
  2. Utilitza un StatefulWidget per gestionar l'estat del text.

Solucions

Exercici 1: Solució

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 Home Page'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter Web!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Exercici 2: Solució

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 StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = 'Hello, Flutter Web!';

  void _changeMessage() {
    setState(() {
      _message = 'You pressed the button!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _message,
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _changeMessage,
              child: Text('Press me'),
            ),
          ],
        ),
      ),
    );
  }
}

  1. Resum

En aquesta secció, hem après com configurar l'entorn per a Flutter Web, crear una aplicació web bàsica i desplegar-la. També hem vist com afegir interactivitat a la nostra aplicació. Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions web amb Flutter.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats