Table of contents
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.