Comment faire sa premier application

Comment faire sa premier application

Une fois la configuration compléter nous allons pouvoir faire notre premier application.

Tout d'abord nous allons comprendre la structure du code. Petit rappel, nous allons utilisé le programme de programmation Dart pour pouvoir coder notre première application. 

Lors de la création de notre première application dans notre éditeur favori nous allons avoir différent dossier qui vont se créer:  

Flutter étant une application multiplateforme nous allons avoir les différents dossier nécessaire pour que nous puissions build notre application selon notre besoin(Web, IOS, Android). Nous allons majoritairement travailler dans le dossier lib qui nous permettras de bien structure notre code selon la méthode de conception voulu. Le main.dart est notre fichier principal mais il est toujours possible de le renommer selon nos besoin.

À quoi ressemble du code Dart:

Une fois notre premier projet créer voyons à quoi ressemble le code:

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

        useMaterial3: true,

      ),

      home: const MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}

Donc la premier méthode main permet de savoir quel application nous allons exécuter. Dans ce cas-ci nous allons exécuter le Widget qui est en StatelessWidget car il ne subira pas de modification directement. MaterialApp est une des librairie que nous utilisons qui nous permet de un grand nombre de chose et qui contiens un une grande variété de Widget disponible. Donc nous pouvons voir que nous avons différent valeur à l'intérieure du MaterialApp. Il nous est possible de modifier le titre afficher pour notre application, la palette de couleur utiliser pour les thème de couleur et notre page principal avec son titre qui nous dirige vers une autre classe pour afficher le widget principal.

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;

  void _incrementCounter() {

    setState(() {

      _counter++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            const Text(

              'You have pushed the button this many times:',

            ),

            Text(

              '$_counter',

              style: Theme.of(context).textTheme.headlineMedium,

            ),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: _incrementCounter,

        tooltip: 'Increment',

        child: const Icon(Icons.add),

      ),

    );

  }

}

Dans cette exemple nous fessons un compteur qui réagit à l'appui d'un button. Donc nous avons premièrement l'initialisation de notre variable _counter par la suite nous créons une méthode pour augmenter le compteur que nous allons utiliser dans la méthode onPress du button. 

Par la suite nous avons notre méthode build qui va nous retourner un Widget. Donc nous avons premièrement notre AppBar qui seras notre bar au dessus de l'application. Nous pouvons modifier sa couleur et son titre. Par la suite nous avons le body qui va retourner un élément centrer au milieux de notre écran. Dans l'élément Center, nous avons la possibilité de mettre un effet de colonne. Ce qui veut tout simplement dire que les élément vont s'imbriquer les un par-dessus des autre alors que lorsque nous utilisions Row il vont être un à la suite de l'autre. 

Dans la colonne nous allons trouver deux Widget. Le premier est notre widget Text qui nous permet d'afficher notre texte à l'écran et par la suite notre buttons. Dans notre buttons nous pouvons voir qu'il a un autre Widget qui sont les Icon, avec la libraire MateralApp nous disposont d'une grand séléction d'icon à notre diposition.

Voila le rendu final de l'application:
 

Dans cette exemple, nous l'avons ouvert sur notre navigateur Web mais rien ne nous empêche de l'ouvrir directement dans notre émulateur Android ou IOS

Références : 

Dart, consulté le 02/03/2024

MaterialApp class consulté le 02/03/2024