How is this design achieved in Flutter?

Question

How to achieve this design in Flutter?

This is like a custom animated TabView.

Answer 1

you can use "container_tab_indicator" package install it with flutter pub add container_tab_indicator

then use it like this:

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('Orders', style: TextStyle(color: Colors.pink[900])),
    Text('Order Requests', style: TextStyle(color: Colors.pink[900])),
    Text('My Requests', style: TextStyle(color: Colors.pink[900])),
  ],
  indicator: ContainerTabIndicator(
    //play with these properties as you see fit
    radius: BorderRadius.all(Radius.circular(16.0)),
    padding: const EdgeInsets.only(left: 36),
  ),
),