Flutter - create header with icon

Flutter - create header with icon

·

2 min read

Flutter - create header with icon

To create a header in Flutter with user, account, and post icons, you can use the AppBar widget along with IconButton widgets for the icons. Here's an example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Header Example',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HeaderPage(),
    );
  }
}

class HeaderPage extends StatelessWidget {
  const HeaderPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Header Example'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              // Perform action when user icon is pressed
            },
          ),
          IconButton(
            icon: const Icon(Icons.account_circle),
            onPressed: () {
              // Perform action when account icon is pressed
            },
          ),
          IconButton(
            icon: const Icon(Icons.post_add),
            onPressed: () {
              // Perform action when post icon is pressed
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'Header Example Body',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

In this example, we have a MyApp class that serves as the entry point of the application. It sets up the app's title and theme and sets HeaderPage as the home page.

The HeaderPage class extends StatelessWidget and represents the page with the header. Inside the build method, we define a Scaffold with an AppBar widget.

The AppBar widget contains a title widget that displays the title text. The actions property of the AppBar is set to a list of IconButton widgets. Each IconButton represents an icon in the header.

In this example, we use the person, account_circle, and post_add icons from the Icons class. You can change these icons to any other available icons according to your requirements.

For each IconButton, we define the onPressed callback to perform the desired action when the icon is pressed. Replace the placeholder comments with your own logic to handle the actions.

The body of the Scaffold displays a simple Text widget with the message "Header Example Body."

By running this code, you should see an app bar at the top with the title "Header Example" and three icons on the right side: user icon, account icon, and post icon. The body of the page displays the text "Header Example Body" in the center.