Widget di esempio: loading...

In questo semplice esempio realizzeremo un App che alla pressione del pulsante aprira' una finestra modale con un cursore circolare che indichera' lo stato di "caricamento in corso".

Per realizzare il progetto, create un progetto vuoto a linea di comando:

    flutter create project01

Aprite il file main.dart, ed aggiongete il codice qui di seguito riportato.

file: main.dart

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Creazione del Widget Stateful:

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

  final String title;

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

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
      _onLoading();
  }

  @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),
      ),
    );
  }

La definizione del metodo che permette la visualizzazione della finestra modale con l'indicatore di "caricamento in corso".

  void _onLoading() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return Dialog(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                CircularProgressIndicator(),
                SizedBox(width: 30,),
                Text("Loading"),
              ],
            ),
          ),
        );
      },
    );
    Future.delayed(new Duration(seconds: 1), () {
      setState(() {
        _counter++;
      });
      Navigator.pop(context);
    });
  }
}

Compilate il programma ed eseguitelo nell'emulatore Android (o iOS).

Alla pressione del pulsante (+) verra' visualizzata una finestra modale con un cursore circolare (CircularProgressIndicator):

La finestra modale rimarra' visibile per 1 sercondo. Dopo la chiusura della finestra si potra' riutilizzare il pulsante per visualizzare nuovamente la finestra.

Widget di esempio: loading...

Codice di esempio: creare un widget per il caricamento in corso