Le widget Stack permet de superposer un widget sur un autre. Donc, nous ne pouvons pas utiliser des lignes et des colonnes. Par conséquent, vous pouvez afficher du texte sur une image en utilisant le widget stack dans les applications Flutter.
Le widget stack nous permet d’afficher plusieurs couches de widgets à l’écran. Il est également à multiples widgets enfants, ce qui signifie qu’il possède une propriété children. L’ordre des couches de widgets de bas en haut , donc le premier widget sera en bas et vice versa, le dernier widget sera en haut.
Le constructeur de la classe Stack() accepte différentes propriétés.
Le widget Stack – positionned
Les éléments positionnés sont encapsulés dans le widget Positionned et doivent avoir un attribut non nul.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stack | Positioned'),
),
body: Stack(
children: <Widget>[
Container(
width: 400,
height: 400,
color: Colors.green[500],
child: Center(
child: Text(
'Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Container(
width: 250,
height: 150,
color: Colors.cyan[400],
child: Center(
child: Text(
' Cyan',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Container(
width: 100,
height: 100,
color: Colors.indigo[300],
child: Center(
child: Text(
'Indigo',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
],
));
}
}
Comme vous pouvez le constater dans l’exemple, le vert est le premier widget enfant, il est donc en bas. Cependant le conteneur de couleur indigo est en haut, et le cyan est au milieu.
En fait, l’utilisation du widget Positioned avec le widget stack permet de positionner le widget enfant.
Si vous souhaitez que le widget soit placé dans le coin inférieur droit, utilisez ce code :
Positioned(right: 0, bottom: 0, child: Text("Bottom right"))Par exemple right:10 , signifie qu’il a une position 10 du côté droit.
Les propriétés du widget Stack
Voici les propriétés que vous pouvez utiliser avec le widget Stack.
textDirection
Il détermine la direction du texte. Il peut être du texte ltr (de gauche à droite) ou rtl (de droite à gauche).
Stack(
textDirection: TextDirection.rtl,
children: <Widget>[ ]
) Le widget Stack – alignement
Chaque élément de l’objet Stack est soit positionné ou non positionné. Stack lui-même contient tous les sous-composants qui ne sont pas positionnés. Les sous-composants sont positionnés en fonction de la propriété d’alignement (la valeur par défaut est le coin supérieur gauche).
body: Stack(
alignment: Alignment.topRight,
children: <Widget>[ ]
)La propriété fit
Contrôle la taille des widgets qui ne sont pas positionnés dans Stack. Il en existe trois types : loose, expand and passthrough. L’attribut loose est utilisé pour placer le petit widget, la propriété expand rend le widget aussi grand que possible et passthrough définit le widget en fonction de son widget.
La propriété overflow
Contrôle les widgets enfants, s’ils sont visibles ou tronqués, lorsque le contenu déborde en dehors du Stack.
Stack(
overflow: Overflow.clip,
children: <Widget>[ ]
) Prenons un autre exemple et essayons d’appliquer certaines propriétés essentielles du widget Stack.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// le Widget principal de l'application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStackWidget(),
);
}
}
class MyStackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Le Widget Stack"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
overflow: Overflow.visible,
children: <Widget>[
// Le plus grand widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Vert',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,
width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Bleu',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Orange',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
)),
],
),
)),
);
}
}
Le widget IndexedStack
Le widget IndexedStack ne peut afficher qu’un seul widget de la pile. Nous pouvons spécifier un index donné à partir de plusieurs widgets. La position de l’index commence à partir de 0 zéro. Si nous augmentons l’index, il chargera le widget suivant en fonction de l’index donné.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IndexedStack'),
),
body: IndexedStack(
index: 1,
children: <Widget>[
Container(
width: 400,
height: 400,
color: Colors.green[500],
child: Center(
child: Text(
'Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Container(
width: 250,
height: 150,
color: Colors.cyan[400],
child: Center(
child: Text(
' Cyan',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Container(
width: 100,
height: 100,
color: Colors.indigo[300],
child: Center(
child: Text(
'Indigo',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
],
));
}
}
Changez l’index pour voire ce qui sera affiché.
0 commentaire