Flutter

dart create -t console-full tutoriel

cd tutoriel

dart run

Hello world: 42!

Paramètres nommés

Première application

import 'package:flutter/material.dart';

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

Material

class MonApplication extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cinéma',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Material(
        child: Center(
          child: Text(
            'Application Cinéma',
            style: TextStyle(fontSize: 40),
      ))),
    );
  }
}

Scaffold

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cinéma'),
      ),
      body: Center(child: Text(
            'Application Cinéma',
            style: TextStyle(fontSize: 40),)),
      backgroundColor: Colors.blueGrey.shade200,
    );
  }

AppBar, qui est une barre horizontale généralement affichée en haut d'une application à l'aide de la propriété appBar.

BottomAppBar, est une barre horizontale généralement affichée au bas d'une application à l'aide de la propriété bottomNavigationBar.

FloatingActionButton, qui est un bouton circulaire généralement affiché dans le coin inférieur droit de l'application à l'aide de la propriété floatingActionButton.

Drawer, qui est un panneau vertical généralement affiché à gauche du corps (et souvent masqué sur les téléphones) à l'aide de la propriété drawer.

BottomNavigationBar, qui est un tableau horizontal de boutons généralement affichés en bas de l'application à l'aide de la propriété bottomNavigationBar.

SnackBar, qui est une notification temporaire généralement affichée près du bas de l'application à l'aide de la méthode ScaffoldState.showSnackBar.

BottomSheet, qui est une superposition généralement affichée près du bas de l'application. Une feuille du bas peut être persistante, auquel cas elle est affichée à l'aide de la méthode ScaffoldState.showBottomSheet, ou modale, auquel cas elle est affichée à l'aide de la fonction showModalBottomSheet.

ScaffoldState, qui est l'état associé à ce widget.

Tiroir

Dans un widget Scaffold la propriété drawer permet d'ajouter un objet widget Scaffold.

Ajoutez maintenant un tiroir à l'échafaudage. Un tiroir peut être n'importe quel widget, mais il est souvent préférable d'utiliser le widget Tiroir de la bibliothèque de matériaux, qui respecte les spécifications de Material Design.

Maintenant que vous avez un tiroir en place, ajoutez-y du contenu. Pour cet exemple, utilisez un ListView. Bien que vous puissiez utiliser un widget Colonne, ListView est pratique car il permet aux utilisateurs de faire défiler le tiroir si le contenu prend plus d'espace que l'écran ne le prend en charge.

Remplissez le ListView avec un DrawerHeader et deux widgets ListTile. Pour plus d'informations sur l'utilisation des listes, consultez les recettes de listes.

Routes

Ensuite, définissez les routes en fournissant des propriétés supplémentaires au constructeur MaterialApp: l'initialRoute et les routes elles-mêmes.

La propriété initialRoute définit l'itinéraire par lequel l'application doit commencer. La propriété routes définit les routes nommées disponibles et les widgets à créer lors de la navigation vers ces routes.