devstory

Le Tutoriel de Flutter IndexedStack

View more Tutorials:

1- IndexedStack

IndexedStack est une sous-classe de Stack. Contrairement à Stack, IndexedStack n'affiche au plus qu'un widget à la fois et masque les autres widgets. Il est possible de spécifier le widget enfant à afficher via la propriété index. Si index est null, aucun widget enfant ne sera affiché.
IndexedStack constructor
IndexedStack(
  {Key key,
  AlignmentGeometry alignment: AlignmentDirectional.topStart,
  TextDirection textDirection,
  StackFit sizing: StackFit.loose,
  int index: 0,
  List<Widget> children: const <Widget>[]}
)
En règle générale, la taille d'IndexedStack est aussi petite que possible et essaie d'être plus grande que tous ses enfants (sauf pour ceux Positioned ou Transform).
Il est possible de contrôler la taille de IndexedStack en le plaçant dans un SizedBox.

2- Examples

Un exemple simple à propos d'IndexedStack:
main.dart (ex1)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter IndexedStack Example")
      ),
      body: SizedBox (
        width: double.infinity,
        height: double.infinity,
        child: IndexedStack (
            alignment: Alignment.center,
            index: this.selectedIndex,
            children: <Widget>[
              Container(
                width: 290,
                height: 210,
                color: Colors.green,
              ),
              Container(
                width: 250,
                height: 170,
                color: Colors.red,
              ),
              Container(
                width: 220,
                height: 150,
                color: Colors.yellow,
              ),
            ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          setState(() {
            if(this.selectedIndex < 2)  {
              this.selectedIndex++;
            } else {
              this.selectedIndex = 0;
            }
          });
        },
      ),
    );
  }
}

3- children

children - c'est une liste de widgets enfants d'IndexedStack.
List<Widget> children: const <Widget>[]}

4- index

index: L'index du widget enfant sera affiché, sa valeur par défaut est 0. Si index est null, aucun widget enfant ne sera affiché.
int index: 0

5- fit (sizing)

Le paramètre de sizing dans le constructeur d'IndexedStack attribuera une valeur à la propriété fit. Il montre "Comment dimensionner les widgets enfants autres que Positioned of IndexedStack". La valeur par défaut de la propriété fit est StackFit.loose.
StackFit sizing: StackFit.loose

// Enum:
 StackFit.expand
 StackFit.loose
 StackFit.passthrough
  • TODO Link!

6- textDirection

La propriété textDirection est utilisée pour définir la direction du texte. Sa valeur affecte le comportement de la propriété alignment.
TextDirection textDirection

7- alignment

La propriété alignment est utilisée pour aligner des widgets autres que Positionned. Sa valeur par défaut est AlignmentDirectional.topStart.
AlignmentGeometry alignment: AlignmentDirectional.topStart

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.