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

Construcció d'una Aplicació Simple amb Flutter

Següent ►
►

En aquest tema, aprendrem a construir una aplicació simple utilitzant Flutter, el framework de Google per al desenvolupament d'aplicacions mòbils. Flutter permet crear aplicacions nadiues per a Android i iOS amb una única base de codi. Aquest tutorial et guiarà pas a pas per crear una aplicació bàsica.

Objectius

  • Configurar un projecte Flutter.
  • Comprendre l'estructura d'un projecte Flutter.
  • Crear una interfície d'usuari simple.
  • Executar l'aplicació en un emulador o dispositiu físic.

Requisits Previs

  • Coneixements bàsics de Dart.
  • Entorn de desenvolupament configurat per a Flutter (veure el tema anterior).

  1. Configuració del Projecte Flutter

1.1. Crear un Nou Projecte Flutter

Obre el terminal i executa la següent comanda per crear un nou projecte Flutter:

flutter create my_first_app

Això crearà una nova carpeta anomenada my_first_app amb l'estructura bàsica d'un projecte Flutter.

1.2. Navegar al Directori del Projecte

Canvia al directori del projecte:

cd my_first_app

1.3. Obrir el Projecte en l'IDE

Obre el projecte en el teu IDE preferit (VS Code, Android Studio, etc.). Assegura't que tens els plugins de Flutter i Dart instal·lats.

  1. Estructura d'un Projecte Flutter

Un projecte Flutter típic té la següent estructura:

my_first_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
└── README.md
  • android/ i ios/: Contenen els fitxers específics per a les plataformes Android i iOS.
  • lib/: Conté el codi Dart de l'aplicació. El fitxer principal és main.dart.
  • test/: Conté els tests de l'aplicació.
  • pubspec.yaml: Fitxer de configuració del projecte, on es defineixen les dependències.

  1. Crear una Interfície d'Usuari Simple

3.1. Editar el Fitxer main.dart

Obre el fitxer lib/main.dart i reemplaça el contingut amb el següent codi:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3.2. Explicació del Codi

  • main(): La funció principal que executa l'aplicació.
  • MyApp: Un widget sense estat que configura el tema i la pàgina inicial de l'aplicació.
  • MyHomePage: Un widget amb estat que mostra un comptador i un botó per incrementar-lo.
  • _incrementCounter(): Una funció que incrementa el valor del comptador i actualitza la interfície d'usuari.

  1. Executar l'Aplicació

4.1. Executar en un Emulador

Assegura't que tens un emulador Android o iOS en funcionament. Després, executa la següent comanda al terminal:

flutter run

4.2. Executar en un Dispositiu Físic

Connecta el teu dispositiu al teu ordinador i assegura't que el mode de desenvolupador està activat. Després, executa la mateixa comanda:

flutter run

Exercici Pràctic

Exercici

Modifica l'aplicació per afegir un segon botó que decrementi el valor del comptador.

Solució

Afegeix el següent codi al widget Scaffold:

floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
    SizedBox(width: 10),
    FloatingActionButton(
      onPressed: _decrementCounter,
      tooltip: 'Decrement',
      child: Icon(Icons.remove),
    ),
  ],
),

I defineix la funció _decrementCounter:

void _decrementCounter() {
  setState(() {
    _counter--;
  });
}

Conclusió

En aquest tema, hem après a crear una aplicació simple amb Flutter, des de la configuració del projecte fins a la creació d'una interfície d'usuari bàsica. També hem vist com executar l'aplicació en un emulador o dispositiu físic. En el proper tema, explorarem com utilitzar Dart per al desenvolupament web.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats