Flutter

Mateial :
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.indigo
),
home: HomePage(),
);

Scaffold :
Prend un appBar qui permet de définir le titre de l’application
appBar : AppBar(title : Text(« titre de l’application »))
Un body qui contient le corps de l’application il peut prendre :
Column :
Column prend un children et ce dernier peut contenir des Container,
Card, Text … .
Column permet de position le contenu verticale et avec
crossAxisAlignment et mainAxisAlignment on peut déplacer le
contenue de gauche à droite, d’en haut en bas ou bien au centre
ex :
body: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,//
ceci //permet de prendre toute la largeur
child: const Card(
child: Text("data"),
),
),
const Card(child: Text("Card 2"),)
],
),

Row : Permet de mettre le contenu dans une ligne

Container
 ListView :
ListView.(builder, custom, separated) permet de définir une liste scrollable
avec itemBuilder qui contient le corps de la liste et itemCount qui permet de
définir la taille de la liste.

ListTitle : Permet de définir une liste sous forme de titre . Il prend un leading : (Icon,
CircleAvatarà)=, Image, …) , un title qui permet de donner un titre et un subtitle qui
permet de donner un sous titre
Card : Card nous permet d’avoir le contenu dans un rectangle. shape à l’intérieur
d’un Card nous permet d’avoir un rectangle avec les coins arrondis.
InkWell(
onTap:selectedMeal ,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15),
),
elevation: 4,
margin:const EdgeInsets.all(10),
child: Column(
children: [
Stack(
children: [
ClipRRect(borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15)),
child: Image.network(imageUrl, height: 250, width:
double.infinity, fit: BoxFit.cover,),)
],
)
],
),
),
)
 crossAxisAlignment permet de repositionné la colonne
TextField permet de prendre un texte en entré
keyboardType : Permet de dire si l’entré sera un nombre ou un email ou une url … ça
permet de contrôler la saisie au clavier.
theme: ThemeData(
primarySwatch: Colors.indigo
),
// Permet de définir une couleur de l’application

color: Theme.of(context).primaryColor
// Permet que le texte prend la même couleur que le thème de l’application
fit : BoxFit.cover permet de limiter l’image pour qu’elle le dépasse pas le conteneur
PageRoute
void selectedCategory(BuildContext context){
Navigator.of(context).push(
MaterialPageRoute(builder: (_){
return const CategoryMealPage();
}));
}
 Ceci permet de faire une redirection vers une autre page avec la possibilité de
retourner en arrière. Navigator.of(context).(push, pushNamed, …) avec pushNamed nous
permet de faire une redirection vers un id spécifique.
InkWell(
onTap:() => selectedCategory(context),
splashColor: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(25),
child: Container(
padding:const EdgeInsets.all(15),
decoration: BoxDecoration(gradient: LinearGradient(colors:
[color.withOpacity(0.7),
color,],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
borderRadius: BorderRadius.circular(15)),
child: Text(title),
),
);

Dismissible Permet de faire des suppressions

confirmDismiss Permet de confirmer ou d’infirmer la suppression

Dismissible(
key: ValueKey(id),
direction: DismissDirection.endToStart,
confirmDismiss: (DismissDirection direction) async {
showDialog(context: context, builder: (context) => AlertDialog(
title:const Text('Etes vous sure de vouloir supprimer le produit ?'),
actions: [
TextButton(
onPressed: (){
Navigator.of(context).pop(true);
},
child:const Text('Annuler'),

),
TextButton(
onPressed: (){Navigator.of(context).pop(true);},
child:const Text('Oui')
)
],
)
);
},
onDismissed:(DismissDirection direction){
Provider.of<Cart>(context, listen: false).removeItem(productId);
},
background: Container(
color: Theme.of(context).errorColor,
alignment: Alignment.centerRight,
padding:const EdgeInsets.only(right: 20),
 margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 15),
// decoration: DismissDirection.endToStart,
child: const Icon(Icons.delete,
color: Colors.white,
size: 40,),
),
child: Card(
margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 4),
child: Padding(
padding:const EdgeInsets.all(8),
child: ListTile(
leading: CircleAvatar(
child: Padding(
padding:const EdgeInsets.all(0),
child: FittedBox(child: Image.network(imageUrl)
)
),
),
title: Text('$title: $price FCFA'),
subtitle: Text('Total: ${price * quantity} FCFA'),
trailing: Text('$quantity'),
),
),
),
);