Flutter
Mateial :
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: [Link]
),
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: [Link](context).[Link],//
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: [Link](15),
),
elevation: 4,
margin:const [Link](10),
child: Column(
children: [
Stack(
children: [
ClipRRect(borderRadius: const [Link](
topLeft: [Link](15),
topRight: [Link](15)),
child: [Link](imageUrl, height: 250, width:
[Link], fit: [Link],),)
],
)
],
),
),
)
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: [Link]
),
// Permet de définir une couleur de l’application
color: [Link](context).primaryColor
// Permet que le texte prend la même couleur que le thème de l’application
fit : [Link] permet de limiter l’image pour qu’elle le dépasse pas le conteneur
PageRoute
void selectedCategory(BuildContext context){
[Link](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. [Link](context).(push, pushNamed, …) avec pushNamed nous
permet de faire une redirection vers un id spécifique.
InkWell(
onTap:() => selectedCategory(context),
splashColor: [Link](context).primaryColor,
borderRadius: [Link](25),
child: Container(
padding:const [Link](15),
decoration: BoxDecoration(gradient: LinearGradient(colors:
[[Link](0.7),
color,],
begin: [Link],
end: [Link]),
borderRadius: [Link](15)),
child: Text(title),
),
);
Dismissible Permet de faire des suppressions
confirmDismiss Permet de confirmer ou d’infirmer la suppression
Dismissible(
key: ValueKey(id),
direction: [Link],
confirmDismiss: (DismissDirection direction) async {
showDialog(context: context, builder: (context) => AlertDialog(
title:const Text('Etes vous sure de vouloir supprimer le produit ?'),
actions: [
TextButton(
onPressed: (){
[Link](context).pop(true);
},
child:const Text('Annuler'),
),
TextButton(
onPressed: (){[Link](context).pop(true);},
child:const Text('Oui')
)
],
)
);
},
onDismissed:(DismissDirection direction){
[Link]<Cart>(context, listen: false).removeItem(productId);
},
background: Container(
color: [Link](context).errorColor,
alignment: [Link],
padding:const [Link](right: 20),
margin: const [Link](vertical: 4, horizontal: 15),
// decoration: [Link],
child: const Icon([Link],
color: [Link],
size: 40,),
),
child: Card(
margin: const [Link](horizontal: 15, vertical: 4),
child: Padding(
padding:const [Link](8),
child: ListTile(
leading: CircleAvatar(
child: Padding(
padding:const [Link](0),
child: FittedBox(child: [Link](imageUrl)
)
),
),
title: Text('$title: $price FCFA'),
subtitle: Text('Total: ${price * quantity} FCFA'),
trailing: Text('$quantity'),
),
),
),
);