Flutter – Ambiente on line

Lo scopo di questo post è mostrare subito la potenzialità di un ambiente di sviluppo on line.

Prerequisiti è conoscere SQL, conoscere PHP e naturalmente conoscere il linguaggio DART nel framework FLUTTER.

Lo scopo è mostrare un’applicazione completa per poi scendere nei particolari nei post successivi.

L’ambiente di sviluppo on line è infinity free.net

Esso consente di non installare un ambiente XAMP (Linux, Apache, MySQL, PHP) sul proprio host ma utilizzare un server on line, naturalmente con tutte le limitazioni del caso.

Dopo essersi loggato si crea un ambiente gratuito con un URL fornito dalla piattaforma e naturalmente non commerciale.

Nel mio caso, ad oggi, data di scrittura del post, accedo con https//bragadin.42web.io

Il  PHP come eventualmente le mie pagine web vengono inserite nella cartella htdocs.

L’account viene assegnato casualmente ad esempio il nome del database è if0_39612443_francesco202

Codice SQL per la creazione della tabella.

CREATE TABLE utenti (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nome VARCHAR(100)
);

una chiave primaria che si auto incrementa ed un campo di tipo testo.

Quindi inserisco tre record:

INSERT INTO nome_tabella (colonna1, colonna2, colonna3)
VALUES ('valore1', 'valore2', valore3);

dove a valore1, valore2 e valore3 ho inserito tre nomi.

Adesso scrivo nella libreria il file htdocs il file in PHP get_anagrafica.php

<?php
// Connessione al database
$host = 'sql100.infinityfree.com';
$dbname = 'if0_39612443_francesco2025';
$username = 'xxxxxxxx';
$password = 'xxxxxxxx';
$conn = new mysqli($host, $username, $password, $dbname);

// Controllo connessione
if ($conn->connect_error) {
    die("Connessione fallita: " . $conn->connect_error);
}

// Query per ottenere gli ultimi 3 record
$sql = "SELECT * FROM anagrafica ORDER BY id DESC LIMIT 3";
$result = $conn->query($sql);

// Preparazione dell'array di risposta
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// Restituisce i dati in formato JSON
header('Content-Type: application/json');
echo json_encode($data);

// Chiude la connessione
$conn->close();
?>

Digitando su un browser:

https://bragadin.42web.io/get_anagrafica.php

vedrei i tre record emessi in formato JSON che devono essere dati a flutter.

Con flutter la correzione del codice avviene in termini reali consentendo di diminuire i tempi di sviluppo.

VS Code se si vuole provare in locale altrimenti si può usare la piattaforma zapp.run

Editare il file pubsec.yaml sostituendo il codice esistente con il seguente:

name: anagrafica_app
description: Un'app Flutter per la gestione dell'anagrafica
publish_to: 'none' # Non pubblicare su pub.dev

version: 1.0.0+1

environment:
  sdk: '>=3.3.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6

  # Aggiungi altre dipendenze qui, se necessario

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^3.0.1

flutter:
  uses-material-design: true

andare quindi a editare il file main.dart con il seguente codice:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Anagrafica',
      home: AnagraficaPage(),
    );
  }
}

class AnagraficaPage extends StatefulWidget {
  @override
  _AnagraficaPageState createState() => _AnagraficaPageState();
}

class _AnagraficaPageState extends State<AnagraficaPage> {
  List<dynamic> nomi = [];

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse(
        'https://bragadin.42web.io/get_anagrafica.php')); // <-- Modifica con il tuo URL PHP

    if (response.statusCode == 200) {
      setState(() {
        nomi = json.decode(response.body);
      });
    } else {
      throw Exception('Errore nel caricamento dei dati');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lista Anagrafica'),
      ),
      body: nomi.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: nomi.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(nomi[index]['nome']),
                  subtitle: Text('ID: {nomi[index]['id']}'),
                );
              },
            ),
    );
  }
}

L’app avrà il seguente aspetto: