AppBar en Flutter - Guía Completa

Learn to create and customize the top bar in your Flutter applications

Download Example Code

What is an AppBar in Flutter?

The AppBar is one of the most widely used widgets in Flutter. It represents an application's top bar, which usually contains the title, actions and other navigation elements.

Mi Aplicación

Contenido de la aplicación aquí...

AppBar Basics

Let's start with the simplest implementation of an AppBar:

Flutter Code - AppBar Basics

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('Mi Aplicación'),
        ),
        body: Center(
          child: Text('¡Hola Mundo!'),
        ),
      ),
    );
  }
}

Code Explanation:

  • MaterialApp: Root widget that provides the material design theme
  • Scaffold: Provides the basic screen structure
  • AppBar: Widget that creates the app bar
  • title: Property that defines the title text

AppBar with Actions

Add action buttons to the AppBar for additional functionality:

AppBar with Action Icons

AppBar(
  title: Text('Mi Aplicación'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Acción de búsqueda      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Acción del menú      },
    ),
  ],
)

AppBar Customization

Customize the color, elevation and other visual aspects:

AppBar Customized

AppBar(
  title: Text('Mi Aplicación Personalizada'),
  backgroundColor: Colors.deepPurple,
  elevation: 4.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(15),
    ),
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.favorite),
      onPressed: () {},
    ),
  ],
)
Mi Aplicación Personalizada

AppBar Customizer

Try different configurations in real time:

4
Mi Aplicación

Contenido de la aplicación aquí...

AppBar Properties

Property Type Description
title Widget The AppBar's main title
actions List<Widget> Action icons or widgets
backgroundColor Color The AppBar's background color
elevation double The AppBar's elevation (shadow)
leading Widget Widget at the start (usually a navigation icon)
flexibleSpace Widget Widget placed behind the toolbar

Exercises to Practice

Exercise 1: AppBar with Image

Create an AppBar that uses an image as the title instead of text.

Suggested solution:
AppBar(
  title: Image.asset(
    'assets/logo.png',
    height: 40,
  ),
  // ... resto de propiedades)

Exercise 2: AppBar Transparent

Create a transparent AppBar that overlaps the content.

Suggested solution:
AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  // ... resto de propiedades)

Exercise 3: AppBar with Search

Implement an AppBar that expands to show a search field.

Suggested solution:
// Necesitarás usar un StatefulWidget// y controlar el estado de expansión

Tips and Best Practices

🎨 Consistent Design

  • Keep the same AppBar style throughout your application
  • Use your brand colors
  • Consider accessibility when choosing colors
  • Follow the Material Design guidelines

⚡ Performance

  • Avoid complex widgets in the title if not necessary
  • Use const constructors when possible
  • Consider using SliverAppBar for complex scrolling
  • Optimize the images used in the AppBar