Scaffold

O Scaffold é um dos widgets mais importantes do Flutter, pois fornece uma estrutura básica para o layout visual de um aplicativo, como a AppBar, Drawer, BottomNavigationBar, FloatingActionButton e o corpo principal da tela.

Neste tutorial, vamos explorar como usar o Scaffold e seus principais componentes em um aplicativo Flutter.

1. O que é o Scaffold?

O widget Scaffold é responsável por implementar a estrutura básica de uma tela. Ele fornece os seguintes componentes que podem ser usados em seu layout:

  • AppBar: Barra de navegação na parte superior da tela.
  • Drawer: Menu lateral.
  • BottomNavigationBar: Barra de navegação inferior.
  • FloatingActionButton: Botão flutuante.
  • Body: A área principal da tela.

2. Exemplo básico de uso do Scaffold

Vamos começar criando um aplicativo Flutter simples usando o widget Scaffold.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exemplo de Scaffold'),
      ),
      body: Center(
        child: Text('Bem-vindo ao Flutter!'),
      ),
    );
  }
}

Explicação do código:

  • MyApp: Este é o widget raiz que inicializa o aplicativo.
  • HomeScreen: Aqui está o uso do widget Scaffold. Ele possui:
    • appBar: Uma barra de navegação no topo.
    • body: A área principal da tela com um texto centralizado.

3. Adicionando um Drawer (Menu Lateral)

O Drawer é um painel deslizante que pode ser acessado ao deslizar da esquerda para a direita. Ele é geralmente usado para navegação.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exemplo de Scaffold com Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Menu'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Navegação ou ação
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Navegação ou ação
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Conteúdo da tela principal'),
      ),
    );
  }
}

Explicação:

  • drawer: Este é o painel lateral (menu) que contém itens que o usuário pode tocar para realizar ações.
  • DrawerHeader: Um cabeçalho opcional para o menu lateral.
  • ListTile: Um item de lista dentro do Drawer.

4. Adicionando o BottomNavigationBar

O BottomNavigationBar é usado para navegação entre diferentes seções de seu aplicativo. Ele fica na parte inferior da tela.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Exemplo de Scaffold com BottomNavigationBar'),
        ),
        body: Center(
          child: Text('Índice selecionado: $_selectedIndex'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

Explicação:

  • BottomNavigationBar: Cria uma barra de navegação na parte inferior da tela com ícones e rótulos.
  • _onItemTapped: A função que atualiza o índice selecionado.

5. Adicionando um FloatingActionButton

O FloatingActionButton é um botão flutuante geralmente usado para ações principais do aplicativo.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exemplo de Scaffold com FAB'),
      ),
      body: Center(
        child: Text('Clique no botão flutuante'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Ação do botão flutuante
          print('Botão pressionado!');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Explicação:

  • floatingActionButton: Um botão flutuante que aparece sobre o conteúdo da tela.
  • onPressed: Ação que será executada quando o botão for pressionado.

6. Conclusão

O Scaffold é uma parte fundamental da criação de interfaces no Flutter, pois fornece uma maneira fácil de configurar uma tela com os componentes essenciais. Neste tutorial, vimos como adicionar:

  • AppBar
  • Drawer
  • BottomNavigationBar
  • FloatingActionButton

Esses componentes podem ser combinados e personalizados para criar a interface do usuário de seu aplicativo Flutter.

Agora que você conhece os principais elementos do Scaffold, você pode começar a experimentar com diferentes layouts e personalizações!