SingleChildScrollView un widget de défilement Flutter

SingleChildScrollView Comme son nom l’indique, ne prend qu’un seul élément enfant, donc il ne peut faire défiler qu’un seul widget. Si la taille réelle du composant dépasse l’espace disponible, une des solutions est d’utiliser le widget SingleChildScrollView.

Dans Flutter, il existe plusieurs types de widgets différents qui vous permettent d’obtenir une fonctionnalité de défilement selon différentes situations.

Il est à noter qu’en général SingleChildScrollView ne doit être utilisé que lorsque le contenu ne dépasse pas trop l’écran.

Par conséquent, si la fenêtre doit contenir trop de contenu au-delà de la taille de l’écran, l’utilisation de SingleChildScrollView sera très coûteuse (performances médiocres). À ce stade, vous devez utiliser d’autres widgets de défilement comme ListView.

En fait, le widget SingleChildScrollView est très utile lorsque nous avons un seul widget, qui doit être entièrement visible. Nous pouvons donc faire défiler verticalement vers le bas.

Les propriétés du widget SingleChildScrollView

scrollDirection : définit la direction du défilement, la valeur par défaut est verticale.

reverse : s’il faut défiler dans le sens inverse du sens de lecture.

padding : la valeur de la marge intérieur.

primary : s’il faut utiliser le contrôleur de défilement primary par défaut dans l’arborescence des widgets. Lorsque la direction du défilement est verticale (la valeur de scrollDirection est Axis.vertical) et si le contrôleur n’est pas spécifié, la valeur par défaut est true.

physics : accepte un objet ScrollPhysics, qui détermine comment le widget répond aux opérations de l’utilisateur, telles qu’un utilisateur qui va continuer à effectuer une animation après avoir levé le doigt, ou comment afficher le widget lorsqu’il défile vers la limite.

controller : cette propriété accepte un objet ScrollController. Le rôle principal de ScrollController est de contrôler la position du défilement et d’écouter les événements de défilement.

child : représente l’élément enfant

Créer un widget de défilement

Voici un exemple de code qui utilise le widget de défilement SingleChildScrollView.

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('SingleChildScrollView'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                width: 300,
                height: 200,
                color: Colors.black,
              ),
              Container(
                width: 300,
                height: 200,
                color: Colors.orange,
              ),
              Container(
                width: 300,
                height: 200,
                color: Colors.green,
              ),
              Container(
                width: 300,
                height: 200,
                color: Colors.cyan,
              ),
              Container(
                width: 300,
                height: 200,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Enlevez le widget de défilement pour voire la différence.

De plus, vous pouvez utiliser Row au lieu de Column. Cependant, vous devez utiliser la propriété scrollDirection.

...
...
body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
...
...

Ce qui vous donnera un défilement horizontal.