Construire une interface utilisateur avec Scaffold et AppBar dans Flutter

Dans Flutter, vous pouvez créer une interface utilisateur simple mais puissante à l'aide de widgets Scaffold et AppBar. Scaffold fournit une structure de base pour une application avec des éléments communs tels que la barre d'application, le corps de l'application et les boutons de navigation. AppBar fait partie de Scaffold et contient le titre de l'application et les options de navigation.

Vous trouverez ci-dessous un guide sur la façon de créer une interface utilisateur simple en utilisant Scaffold et AppBar:

Créer une nouvelle Flutter application

Tout d'abord, créez une nouvelle Flutter application en exécutant la commande suivante dans le terminal  :

flutter create app_name

(Remplacez app_name par le nom souhaité de votre application).

Modifier le fichier main.dart

Dans le fichier main.dart(dans le dossier lib), remplacez le contenu par ce qui suit :

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

Dans l'exemple ci-dessus, nous créons une application avec Scaffold et AppBar. Le Scaffold contient le AppBar et le corps de l'interface utilisateur transmis à la body propriété.

Exécutez l'application

Enfin, pour exécuter l'application, exécutez la commande suivante dans le terminal  :

flutter run

Votre application affichera un écran avec le titre " Flutter Application avec Scaffold et AppBar " sur la barre d'application et le texte Hello, world!  au centre de l'écran.

Conclusion : Scaffold et AppBar sont deux widgets essentiels Flutter qui vous aident à créer une interface utilisateur simple et fonctionnelle. En les utilisant, vous pouvez créer des applications attrayantes avec des composants d'interface utilisateur de base tels que la barre d'application et le corps de l'application.