about flutter TabBar

Issue

Are there similar components in flutter? Or can any profession guy provide me with the code? Thank you.

I can’t find package like this Effect，My request is to show all the tabs after the Animatedcontainer opens the tabbar.

Solution

You may want ExpansionTile and I made it as simple and quick.

class ExpansionGrid extends StatelessWidget {
  const ExpansionGrid({
    super.key,
    required this.itemList,
  });

  final List<YourItem> itemList;

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      tilePadding: EdgeInsets.zero,
      childrenPadding: const EdgeInsets.only(right: 40),
      // it's kind dirty. You may use Row() for title instead.
      title: GridView.builder(
        shrinkWrap: true,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
        ),
        itemBuilder: (context, index) => itemList.sublist(0, 3)[index],
        itemCount: itemList.sublist(0, 3).length,
      ),
      children: [
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          itemBuilder: (context, index) => itemList.sublist(3)[index],
          itemCount: itemList.sublist(3).length,
        ),
      ],
    );
  }
}

class YourItem extends StatelessWidget {
  const YourItem({
    super.key,
    required this.name,
  });

  final String name;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: Center(child: Text(name)),
    );
  }
}

You will need to custom it to make better and more fits to your image.

I hope it helped.

Answered By – White Choco

Answer Checked By – Katrina (FlutterFixes Volunteer)