Question 212061 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make this drop design tab bar in flutter?

enter image description here

How can i make this kind of tab bar in flutter

Tags:

3

Answers


  1. 0

    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
    },
  )
    Login or Signup to reply.
  2. 0 
    import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

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

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

  class _TabbarScreenState extends State<TabbarScreen> {
  int _selectedPage = 0;

  final List _pageOptions = [
    PlaceholderWidget("Page 1"),
    PlaceholderWidget("Page 2"),
    PlaceholderWidget("Page 3"),
    PlaceholderWidget("Page 4"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curved Navigation Bar Example'),
  ),
  body: _pageOptions[_selectedPage],
  bottomNavigationBar: CurvedNavigationBar(
    index: _selectedPage,
    backgroundColor: Colors.white,
    color: Colors.blue,
    buttonBackgroundColor: Colors.blue,
    height: 50.0,
    items: [
      Icon(Icons.home, size: 30),
      Icon(Icons.favorite, size: 30),
      Icon(Icons.person, size: 30),
      Icon(Icons.settings, size: 30),
    ],
        onTap: (index) {
          setState(() {
          _selectedPage = index;
          });
        },
      ),
    );
  }
}

class PlaceholderWidget extends StatelessWidget {
  final String title;

  PlaceholderWidget(this.title);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    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')),
         ],
       ),
     ),
    );
   }
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search