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

Introducció a Flutter Desktop

Següent ►
►

Flutter, originalment dissenyat per a aplicacions mòbils, ha evolucionat per suportar múltiples plataformes, incloent-hi el web i l'escriptori. En aquest tema, explorarem com Flutter pot ser utilitzat per desenvolupar aplicacions d'escriptori per a Windows, macOS i Linux.

  1. Què és Flutter Desktop?

Flutter Desktop és una extensió del framework Flutter que permet crear aplicacions d'escriptori amb la mateixa base de codi que les aplicacions mòbils. Això significa que pots reutilitzar gran part del teu codi existent per crear aplicacions que funcionin en ordinadors de sobretaula i portàtils.

Avantatges de Flutter Desktop:

  • Reutilització de Codi: Utilitza el mateix codi per a aplicacions mòbils i d'escriptori.
  • Rendiment Natiu: Les aplicacions de Flutter Desktop es compilen a codi natiu, oferint un rendiment excel·lent.
  • Consistència de Disseny: Manté una experiència d'usuari consistent a través de diferents plataformes.

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

Requisits del Sistema:

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

Instal·lació de les Dependències:

  1. Flutter SDK: Assegura't de tenir el Flutter SDK instal·lat. Pots seguir les instruccions oficials a flutter.dev.
  2. Entorn de Desenvolupament: Un editor de codi com Visual Studio Code o Android Studio.
  3. Compiladors i Eines:
    • Windows: Visual Studio 2019 amb les càrregues de treball "Desktop development with C++".
    • macOS: Xcode.
    • Linux: Dependències de GTK i altres eines de compilació.

Configuració del Projecte:

  1. Crear un Nou Projecte:

    flutter create my_desktop_app
cd my_desktop_app

  2. Activar el Suport per a Desktop:

    flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
flutter config --enable-linux-desktop

  3. Executar l'Aplicació:

    flutter run -d windows
flutter run -d macos
flutter run -d linux

  1. Estructura del Projecte

Un projecte de Flutter Desktop té una estructura similar a un projecte mòbil, amb algunes carpetes addicionals per a cada plataforma d'escriptori:

my_desktop_app/
├── lib/
│   └── main.dart
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
└── ...

Fitxers Clau:

  • lib/main.dart: El punt d'entrada de l'aplicació.
  • windows/, macos/, linux/: Carpetes específiques de la plataforma que contenen configuracions i codi natiu.

  1. Exemple Pràctic

A continuació, crearem una aplicació d'escriptori simple que mostra un text al centre de la pantalla.

Codi de main.dart:

import 'package:flutter/material.dart';

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

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

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

Explicació del Codi:

  • main(): El punt d'entrada de l'aplicació que crida a runApp().
  • MyApp: Un widget sense estat que defineix el tema i la pàgina principal de l'aplicació.
  • MyHomePage: Un widget sense estat que mostra un text al centre de la pantalla.

  1. Exercici Pràctic

Objectiu:

Crea una aplicació d'escriptori que mostri un botó. Quan es faci clic al botó, el text al centre de la pantalla ha de canviar.

Passos:

  1. Crea un nou projecte de Flutter Desktop.
  2. Modifica main.dart per incloure un botó i un text.
  3. Utilitza un StatefulWidget per gestionar l'estat del text.

Solució:

import 'package:flutter/material.dart';

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

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

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

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

  void _updateText() {
    setState(() {
      _displayText = 'Button Clicked!';
    });
  }

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

Explicació del Codi:

  • _MyHomePageState: Un widget amb estat que gestiona el text que es mostra.
  • _updateText(): Una funció que actualitza l'estat del text quan es fa clic al botó.

  1. Conclusió

Flutter Desktop ofereix una manera poderosa i eficient de crear aplicacions d'escriptori reutilitzant el codi de les aplicacions mòbils. Amb una configuració mínima, pots començar a desenvolupar aplicacions per a Windows, macOS i Linux, aprofitant la consistència i el rendiment natiu que ofereix Flutter.

En el següent tema, explorarem com construir aplicacions d'escriptori més complexes i com gestionar les diferències específiques de cada plataforma.

◄ 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