Tabbar With Notification And Search Icons In Flutter

admin_img Posted By Bajarangi soft , Posted On 18-09-2020

Now to customize our app bar so that it also contains some handy features like notification icon, search icon, or overflow icon at the right side of the title.

set up tabbar with Notification and Searchicon in flutter app

Following is an Android UI screenshot when you run this application on an Android device.
 Main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
        ),
        centerTitle: true,
        title: Text('App Design'),
        backgroundColor: Colors.black,
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search),onPressed: () {},),
          IconButton(icon: Icon(Icons.notifications_none),onPressed: () {},)
        ],
      ),
    );
  }
}

Related Post