How to make this drop design tab bar in flutter?

Question

How can i make this kind of tab bar in flutter

score 2 · Answer 1 · answered Jul 20 '23 at 11:12

2

You can use this package: curved_navigation_bar

CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  )

answered Jul 20 '23 at 11:12

manhtuan21

2,388
2
10
24

if you'll look closely you'll observe that the plus icon is not the part of the tab bar the tab bar has just three items and plus is jut a button, how can i make this design ? – Yogesh Dubey Jul 20 '23 at 11:43

score 2 · Accepted Answer · answered Jul 20 '23 at 13:01

U can try this Dependencies: stylish_bottom_bar: ^1.0.3

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stylish_bottom_bar/model/bar_items.dart';
import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';

class TabbarScreen extends StatefulWidget {
  const TabbarScreen({super.key});

  @override
  State<TabbarScreen> createState() => _TabbarScreenState();
}

class _TabbarScreenState extends State<TabbarScreen> {
  dynamic selected;
  var heart = false;
  PageController controller = PageController();

  @override
   Widget build(BuildContext context) {
   return Scaffold(
     bottomNavigationBar: StylishBottomBar(
        option: AnimatedBarOptions(
      barAnimation: BarAnimation.fade,
      iconStyle: IconStyle.animated,
      ),
      items: [
        BottomBarItem(
        icon: const Icon(
          Icons.chat_bubble_outline,
        ),
        selectedIcon: const Icon(Icons.chat),
        selectedColor: Colors.teal,
        backgroundColor: Colors.teal,
        title: const Text('Chat'),
      ),
      BottomBarItem(
        icon: const Icon(Icons.list),
        selectedIcon: const Icon(Icons.list),
        selectedColor: Colors.red,
        title: const Text('List'),
      ),
      BottomBarItem(
          icon: const Icon(
            Icons.person_outline,
          ),
          selectedIcon: const Icon(
            Icons.person,
          ),
          backgroundColor: Colors.purpleAccent,
          selectedColor: Colors.deepPurple,
          title: const Text('Profile')),
    ],
    hasNotch: true,
    fabLocation: StylishBarFabLocation.end,
    currentIndex: selected ?? 0,
    onTap: (index) {
      controller.jumpToPage(index);
      setState(() {
        selected = index;
      });
    },
   ),
     floatingActionButton: FloatingActionButton(
         onPressed: () {
         setState(() {
           heart = !heart;
         });
       },
        backgroundColor: Colors.white,
        child: Icon(
        heart ? CupertinoIcons.add_circled_solid : CupertinoIcons.add,
        color: Colors.red,
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    body: SafeArea(
       child: PageView(
        controller: controller,
        children: const [
          Center(child: Text('Chat')),
          Center(child: Text('List')),
          Center(child: Text('Profile')),
         ],
       ),
     ),
    );
   }
 }

How to make this drop design tab bar in flutter?

2 Answers2