Les widgets de base

1. Scaffold

Le Scaffold est la structure de base des applications Android. Il s’agit d’un ensemble pouvant regrouper plusieurs éléments comme une appBar, un body, un floatingActionButton ou encore une bottomNavigationBar.

Comme il s’agit d’un élément principal, il sera le premier à être retourné dans le widget de construction graphique, le build.

@override 
Widget build(BuildContext context) { 
 return Scaffold( 
) ; //Scaffold 

@override 
Widget build(BuildContext context) { 
 return Scaffold( 
   appBar: AppBar( 
     title: Text(widget.title), 
     actions: <Widget>[ 
       IconButton( 
           icon: _coeur, 
           onPressed: _likeThis 
       ), 
     ], 
     backgroundColor: Colors.red, 
   ), 
 ); 
} 

1. Scaffold de base

Sous iOS, il existe également un Scaffold. Il sert, tout comme celui du Material Design, à structurer l’écran. Il s’agit du CupertinoPageScaffold.

Afin de l’utiliser, il faut importer la bibliothèque Cupertino car, par défaut, seulement celle de Material est présente.

import 'package:flutter/cupertino.dart'; 

La suite du code est assez semblable au Scaffold vu plus haut :

@override 
Widget build(BuildContext context) { 
 return CupertinoPageScaffold( 
     child: Center( 
       child: Column( 
         mainAxisAlignment: MainAxisAlignment.center, 
         children: <Widget>[ 
 
         ], 
       ), 
     ), 
   backgroundColor: Colors.red[100], 
 ); 
} 

L’exemple reprend la présentation vue couramment, à savoir un Center suivi d’un Column. Une propriété backgroundColor existe également pour définir la couleur de fond. L’autre widget pouvant être incorporé est une navigationBar. Avant de voir cet élément en détail, il existe un autre Scaffold à découvrir qui en possède déjà une.

2. Scaffold avec barre de navigation

Il existe un autre...

1. FloatingActionButton

Le bouton d’action flottant, parfois appelé par son acronyme FAB, a été détaillé précédemment dans les sections AppBar et FloatingActionButton. Ce widget peut être considéré comme faisant partie du Scaffold contrairement aux autres boutons qui, eux, s’intègrent dans la propriété body du Scaffold, au sein d’autres widgets le plus souvent.

2. RaisedButton

Le raisedButton est un bouton Material Design. Il s’agit d’un bouton simulant un relief. Cet effet est donné par une surélévation. Cette dernière augmente davantage lors de l’appui. Sa taille minimum est de 88.0 par 36.0.

Côté action, il propose deux appels : onPressed et onLongPressed. S’ils sont nuls, le bouton est désactivé (disable) par défaut.

Afin de voir l’aspect d’un RaisedButton, une application est créée avec simplement un floatingActionButton ainsi qu’un texte central qui va détecter un appui sur ce dernier :

class _MyHomePageState extends State<MyHomePage> { 
 String _choixBtn = 'Aucun bouton'; 
 
 void _quelBouton(String btn) { 
   setState(() { 
     switch (btn) {  
       case 'fab': 
         { 
           _choixBtn = "FloatingActionButton"; 
         } 
         break; 
       } 
   }); 
 } 
  void _fabOnPressed() { 
   _quelBouton('fab'); 
 } 
 
  
 @override 
 Widget build(BuildContext...

1. Icônes

Les icônes sont l’un des outils les plus employés de nos jours. Elles permettent d’obtenir une compréhension rapide simplement au travers d’un visuel. De plus, à force de les employer, des conventions se sont mises en place. Par exemple, tout le monde associe la loupe à une recherche ou une roue dentée aux paramètres.

L’insertion de l’icône peut être réalisée au travers du widget Icon. Ce dernier permet de jouer avec certaines propriétés. Il est notamment possible de définir la taille de l’icône grâce à size. Sa couleur peut également être modifiée via color.

En dehors de ces paramètres optionnels, la classe Icon attend obligatoirement un objet de type IconData. C’est le cas pour les Icons et les CupertinoIcons. 

Flutter offre un vaste choix d’icônes. Faciles à trouver, puisqu’il existe un choix important déjà prévu. Il propose deux possibilités de base, soit en travaillant avec la classe Icons qui comporte une collection au style Material Design, soit avec la classe CupertinoIcons qui propose un style iOS.

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, 
     ), 
     home: MyHomePage(title: 'Icônes Flutter'), 
   ); 
 } ...