PageView

O PageView é um widget que permite criar uma interface de páginas deslizáveis, onde o usuário pode deslizar horizontalmente (ou verticalmente) para navegar entre diferentes páginas de conteúdo.

Uso Básico

O PageView mais simples recebe uma lista de widgets como filhos:

PageView(
  children: [
    Container(color: Colors.red, child: Center(child: Text('Página 1'))),
    Container(color: Colors.blue, child: Center(child: Text('Página 2'))),
    Container(color: Colors.green, child: Center(child: Text('Página 3'))),
  ],
)

PageView com Múltiplos Itens

Você pode adicionar quantos filhos quiser ao PageView. Cada filho será uma página separada que pode ser acessada deslizando:

PageView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
    Container(color: Colors.purple),
  ],
)

Propriedades Importantes

• children: Lista de widgets que serão exibidos como páginas
• scrollDirection: Define a direção do scroll (Axis.horizontal ou Axis.vertical)
• controller: Permite controlar programaticamente qual página está visível

Exercício

Crie um PageView com altura fixa de 300 pixels, largura completa da tela, com 4 filhos. Cada filho deve ser um Container com uma cor diferente, e cada Container deve ter um Text como child centralizado.

Solução

Ver solução

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('PageView')),
      body: PageView(
        children: [
          Container(
            width: double.infinity,
            height: 300,
            color: Colors.red,
            child: Center(
              child: Text('Página 1'),
            ),
          ),
          Container(
            width: double.infinity,
            height: 300,
            color: Colors.blue,
            child: Center(
              child: Text('Página 2'),
            ),
          ),
          Container(
            width: double.infinity,
            height: 300,
            color: Colors.green,
            child: Center(
              child: Text('Página 3'),
            ),
          ),
          Container(
            width: double.infinity,
            height: 300,
            color: Colors.yellow,
            child: Center(
              child: Text('Página 4'),
            ),
          ),
        ],
      ),
    ),
  ));
}