Utiliser SingleChildScrollView pour créer une page scrollable
Le widget SingleChildScrollView est idéal pour créer une page où le contenu dépasse la taille de l’écran. Celui-ci va en effet permettre à l’utilisateur de faire défiler le contenu, de manière verticale.
Voici un exemple simple d’utilisation du widget SingleChildScrollView pour créer une page scrollable :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SingleChildScrollView Example'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 300.0,
child: Center(
child: Text('Section 1',
style: TextStyle(color: Colors.white, fontSize: 24))),
),
SizedBox(height: 16.0),
Container(
color: Colors.red,
height: 300.0,
child: Center(
child: Text('Section 2',
style: TextStyle(color: Colors.white, fontSize: 24))),
),
SizedBox(height: 16.0),
Container(
color: Colors.green,
height: 300.0,
child: Center(
child: Text('Section 3',
style: TextStyle(color: Colors.white, fontSize: 24))),
),
SizedBox(height: 16.0),
Container(
color: Colors.yellow,
height: 300.0,
child: Center(
child: Text('Section 4',
style: TextStyle(color: Colors.white, fontSize: 24))),
),
],
),
),
),
),
);
}
}Utiliser ListView pour créer une liste scrollable
Si vous souhaitez simplement créer une liste scrollable, utilisez plutôt le widget ListView. Il est souvent utilisé pour les listes de données, telles que les listes de contacts ou bien des flux d’actualités.
Voici un exemple simple d’utilisation du widget ListView accompagné de la méthode .builder() :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de ListView'),
),
body: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.person),
title: Text('Item $index'),
subtitle: Text('Sous titre $index'),
);
},
),
),
);
}
}Ici, ma liste se compose de 20 éléments (itemCount), que je viens définir via le widget Listile. La liste étant plus grande que la taille de l’écran, celle-ci va automatiquement être scrollable.
