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

Creació de la Teva Primera Aplicació Flutter

Següent ►
►

En aquesta secció, aprendrem a crear la nostra primera aplicació Flutter. Aquest procés inclou la configuració inicial del projecte, la comprensió de l'estructura del projecte i la creació d'una interfície d'usuari bàsica.

  1. Configuració Inicial del Projecte

Passos per Crear un Nou Projecte Flutter

  1. Obre el terminal o la línia de comandes.
  2. Executa la següent comanda per crear un nou projecte Flutter: 
    flutter create my_first_app
  3. Navega al directori del projecte: 
    cd my_first_app
  4. Obre el projecte en el teu editor de codi preferit (per exemple, Visual Studio Code): 
    code .

  1. Comprensió de l'Estructura del Projecte

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

my_first_app/
├── android/
├── build/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── .gitignore
├── pubspec.yaml
└── README.md

Descripció dels Directori i Fitxers Principals

  • android/ i ios/: Contenen el codi específic per a les plataformes Android i iOS.
  • lib/: Conté el codi Dart de l'aplicació. El fitxer principal és main.dart.
  • test/: Conté les proves de l'aplicació.
  • pubspec.yaml: Fitxer de configuració del projecte on es defineixen les dependències i altres configuracions.

  1. Creació d'una Interfície d'Usuari Bàsica

Modificació del 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: 'My First Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

Explicació del Codi

  • main(): La funció principal que inicia l'aplicació.
  • MyApp: Un widget sense estat (StatelessWidget) que configura el MaterialApp.
  • MaterialApp: El widget principal que configura l'aplicació, incloent el tema i la pàgina inicial.
  • MyHomePage: Un widget sense estat que representa la pàgina inicial de l'aplicació.
  • Scaffold: Proporciona una estructura bàsica per a la pàgina, incloent l'AppBar i el cos (body).
  • AppBar: Una barra d'aplicació a la part superior de la pàgina.
  • Center: Centra el seu fill (child) en el seu espai disponible.
  • Text: Mostra un text a la pantalla.

  1. Executar l'Aplicació

Passos per Executar l'Aplicació

  1. Connecta un dispositiu físic o inicia un emulador.
  2. Executa la següent comanda al terminal: 
    flutter run

Si tot està configurat correctament, hauràs de veure la teva aplicació en execució amb el text "Hello, Flutter!" centrat a la pantalla.

Exercici Pràctic

Objectiu

Modifica l'aplicació per afegir un botó que, quan es prem, mostri un missatge diferent.

Instruccions

  1. Afegeix un botó a la pàgina inicial (MyHomePage).
  2. Quan es premi el botó, el text ha de canviar a "Button Pressed!".

Solució

import 'package:flutter/material.dart';

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('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('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Explicació de la Solució

  • MyHomePage: Canviat a un widget amb estat (StatefulWidget) per permetre la modificació del text.
  • _MyHomePageState: La classe d'estat que conté la lògica per actualitzar el text.
  • _displayText: Una variable d'estat que emmagatzema el text a mostrar.
  • _updateText(): Una funció que actualitza el text quan es prem el botó.
  • ElevatedButton: Un botó elevat que crida _updateText quan es prem.

Conclusió

En aquesta secció, hem après a crear la nostra primera aplicació Flutter, comprenent l'estructura del projecte i creant una interfície d'usuari bàsica. També hem practicat afegint funcionalitat interactiva a la nostra aplicació. En el següent mòdul, explorarem els conceptes bàsics de programació en Dart, el llenguatge de programació utilitzat per 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