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

Construcció d'Aplicacions d'Escriptori

Següent ►
►

En aquest tema, aprendrem com construir aplicacions d'escriptori utilitzant Flutter. Flutter no només és una eina poderosa per a aplicacions mòbils, sinó que també permet crear aplicacions per a escriptori amb una única base de codi. Això significa que pots reutilitzar gran part del teu codi existent per crear aplicacions per a Windows, macOS i Linux.

  1. Introducció a Flutter Desktop

1.1. Què és Flutter Desktop?

Flutter Desktop és una extensió de Flutter que permet crear aplicacions per a escriptori. Amb Flutter Desktop, pots desenvolupar aplicacions per a:

  • Windows
  • macOS
  • Linux

1.2. Avantatges de Flutter Desktop

  • Reutilització de codi: Pots utilitzar el mateix codi que has escrit per a aplicacions mòbils.
  • Rendiment natiu: Les aplicacions de Flutter es compilen a codi natiu, oferint un rendiment excel·lent.
  • Interfície d'usuari rica: Pots crear interfícies d'usuari atractives i responsives amb els widgets de Flutter.

  1. Configuració de l'Entorn de Desenvolupament

2.1. Requisits del Sistema

  • Windows: Windows 10 o superior.
  • macOS: macOS 10.14 o superior.
  • Linux: Una distribució moderna de Linux.

2.2. Instal·lació de Flutter

Segueix els passos per instal·lar Flutter al teu sistema operatiu. Pots trobar les instruccions detallades a la documentació oficial de Flutter.

2.3. Configuració de l'Entorn

  1. Descarrega i instal·la Flutter: 
    git clone https://github.com/flutter/flutter.git -b stable
  2. Afegeix Flutter al PATH: 
    export PATH="$PATH:`pwd`/flutter/bin"
  3. Verifica la instal·lació: 
    flutter doctor

  1. Creació d'un Projecte d'Escriptori

3.1. Crear un Nou Projecte

Utilitza el següent comandament per crear un nou projecte de Flutter:

flutter create my_desktop_app

3.2. Configuració del Projecte per a Escriptori

  1. Navega al directori del projecte: 
    cd my_desktop_app
  2. Activa les plataformes d'escriptori: 
    flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
flutter config --enable-linux-desktop

3.3. Executar l'Aplicació

Per executar l'aplicació en una plataforma d'escriptori específica, utilitza:

  • Windows: 
    flutter run -d windows
  • macOS: 
    flutter run -d macos
  • Linux: 
    flutter run -d linux

  1. Adaptació de la Interfície d'Usuari

4.1. Diferències en la Interfície d'Usuari

Les aplicacions d'escriptori poden tenir requisits d'interfície d'usuari diferents en comparació amb les aplicacions mòbils. Alguns aspectes a considerar:

  • Dimensions de la finestra: Les aplicacions d'escriptori solen tenir finestres més grans.
  • Interacció amb el ratolí i el teclat: Les aplicacions d'escriptori utilitzen més sovint el ratolí i el teclat.

4.2. Exemples de Widgets Adaptats

  • Scrollbar: Per a l'escriptori, pots utilitzar Scrollbar per millorar la navegació.

    Scrollbar(
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
  ),
);

  • Shortcuts: Pots definir dreceres de teclat per a una millor experiència d'usuari.

    Shortcuts(
  shortcuts: <LogicalKeySet, Intent>{
    LogicalKeySet(LogicalKeyboardKey.select): ActivateIntent(),
  },
  child: Actions(
    actions: <Type, Action<Intent>>{
      ActivateIntent: CallbackAction<Intent>(
        onInvoke: (Intent intent) => print('Activated!'),
      ),
    },
    child: Focus(
      child: Builder(
        builder: (BuildContext context) {
          return ElevatedButton(
            onPressed: () => Actions.invoke(context, ActivateIntent()),
            child: Text('Press Enter'),
          );
        },
      ),
    ),
  ),
);

  1. Compilació i Distribució

5.1. Compilació de l'Aplicació

Per compilar l'aplicació per a una plataforma específica, utilitza:

  • Windows: 
    flutter build windows
  • macOS: 
    flutter build macos
  • Linux: 
    flutter build linux

5.2. Distribució de l'Aplicació

Després de compilar l'aplicació, trobaràs els fitxers binaris a la carpeta build del teu projecte. Pots empaquetar aquests fitxers per distribuir-los als usuaris finals.

Exercicis Pràctics

Exercici 1: Crear una Aplicació d'Escriptori Bàsica

  1. Crea un nou projecte de Flutter.
  2. Activa les plataformes d'escriptori.
  3. Afegeix un ListView amb una Scrollbar.
  4. Executa l'aplicació en la teva plataforma d'escriptori.

Exercici 2: Afegir Dreceres de Teclat

  1. Afegeix dreceres de teclat a l'aplicació creada en l'exercici anterior.
  2. Defineix una drecera per mostrar un diàleg quan es prem una combinació de tecles específica.

Solucions

Solució a l'Exercici 1

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Aplicació d\'Escriptori'),
        ),
        body: Scrollbar(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

Solució a l'Exercici 2

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Aplicació d\'Escriptori amb Dreceres'),
        ),
        body: Shortcuts(
          shortcuts: <LogicalKeySet, Intent>{
            LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyD): ActivateIntent(),
          },
          child: Actions(
            actions: <Type, Action<Intent>>{
              ActivateIntent: CallbackAction<Intent>(
                onInvoke: (Intent intent) => _showDialog(context),
              ),
            },
            child: Focus(
              child: Builder(
                builder: (BuildContext context) {
                  return Center(
                    child: ElevatedButton(
                      onPressed: () => Actions.invoke(context, ActivateIntent()),
                      child: Text('Prem Ctrl+D'),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Drecera Activada'),
          content: Text('Has premut Ctrl+D!'),
          actions: <Widget>[
            TextButton(
              child: Text('Tanca'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

Conclusió

En aquest tema, hem après com configurar l'entorn de desenvolupament per a aplicacions d'escriptori amb Flutter, crear un projecte d'escriptori, adaptar la interfície d'usuari i compilar l'aplicació per a la seva distribució. Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions d'escriptori amb Flutter i aprofitar la potència d'aquesta eina per crear aplicacions multiplataforma.

◄ 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