Tutorial and code of tabbed appbar in flutter. Copy and paste the below code as per your requirements.

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Center(child: Text("Tabbed AppBar"),),
            bottom: TabBar(
              isScrollable: true,
              tabs:<Widget>((Choice choice) {
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
          body: TabBarView(
            children: choice) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: ChoicePage(
                  choice: choice,
class Choice {
  final String title;
  final IconData icon;
  const Choice({required this.title, required this.icon});

const List<Choice> choices = <Choice>[
  Choice(title: 'Test', icon: Icons.sentiment_satisfied),
  Choice(title: 'Test', icon: Icons.sentiment_very_satisfied_sharp),
  Choice(title: 'Test', icon: Icons.sentiment_very_dissatisfied_outlined),
  Choice(title: 'Test', icon: Icons.sentiment_dissatisfied),
  Choice(title: 'Test', icon: Icons.sentiment_satisfied_outlined),
  Choice(title: 'Test', icon: Icons.sentiment_very_satisfied),

class ChoicePage extends StatelessWidget {
  const ChoicePage({Key? key,required this.choice}) : super(key: key);
  final Choice choice;

  Widget build(BuildContext context) {
    final TextStyle? textStyle = Theme.of(context).textTheme.headline4;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
              size: 150.0,
              color: textStyle?.color,
              style: textStyle,

No responses yet

Leave a Reply

Your email address will not be published.