Add beautiful and trending tab indicators directly to your default Flutter TabBar

Hey allo! Can someone help me! I wrap the tabBar in material widget.But i got this error: Another exception was thrown: Padding must be less than half of the size of the tab That is my dart code: `import 'package:badges/badges.dart'; import 'package:blurrycontainer/blurrycontainer.dart'; import 'package:flutter/material.dart'; import 'package:flutter_rating_bar/flutter_rating_bar.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:get/get.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:logger/logger.dart'; import 'package:madia/animations/slowFadeIn.dart'; import 'package:madia/components/comp_menu.dart'; import 'package:madia/models/restaurant.dart'; import 'package:madia/pages/restaurants/detailsmenu.dart'; import 'package:madia/values/values.dart'; import 'package:pigment/pigment.dart'; import 'package:transparent_image/transparent_image.dart'; import 'package:tab_indicator_styler/tab_indicator_styler.dart';

class DetailsRestaurant extends StatefulWidget { DetailsRestaurant({Key key, this.restaurant}) : super(key: key); final Restaurant restaurant; @override _DetailsRestaurantState createState() => _DetailsRestaurantState(); }

class _DetailsRestaurantState extends State with TickerProviderStateMixin { double prct_70 = Get.height * 70 / 100; double prct_40 = Get.height * 40 / 100; TabController tabcon; List nomcategorie = [ "Boisson", "Plat", "Chaud", "Desserts", "Pizza", 'Pate' ]; List listTab = [ Tab( text: "Plat", ), Tab( text: "Boisson", ), Tab( text: "Pate", ), Tab( text: "Dessert", ), // Tab( // child: Text( // 'Dessert', // style: GoogleFonts.sansita(), // ), // ) ]; Widget menuByCategories(String query) { widget.restaurant.menus.where((item) => (item['type'] as String) == query);

return new ListView.builder(
  physics: BouncingScrollPhysics(),
  itemCount: widget.restaurant.menus.length,
  itemBuilder: (context, index) {
    Map<String, dynamic> menu = widget.restaurant.menus[index];
    return SlowFadeIn(
      index.ceilToDouble() - 0.5,
      GestureDetector(
        onTap: () {
          Get.to(DetailsMenu(menu: menu), transition: Transition.topLevel);
        },
        child: ListTile(
          isThreeLine: true,
          contentPadding: EdgeInsets.all(0),
          leading: LimitedBox(
            maxHeight: double.infinity,
            maxWidth: double.infinity,
            child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: FadeInImage.memoryNetwork(
                  placeholder: kTransparentImage,
                  image:
                      menu['imgsrc'] ?? 'https://via.placeholder.com/170',
                  fit: BoxFit.fill,
                )),
          ),
          title: new Text(menu['nom']),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [Text(menu['description']), Text(menu['prix'])],
          ),
        ),
      ),
    );
  },
);

}

@override void initState() { tabcon = TabController(length: 4, vsync: this, initialIndex: 0); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( backgroundColor: Colors.blue, onPressed: () { // Get.to(AddMenu()); Logger().w('lorfgfcg ${widget.restaurant.menus}'); }, child: Icon(Icons.add), ), body: CustomScrollView( physics: BouncingScrollPhysics(), slivers: [ SliverAppBar( backgroundColor: Colors.transparent, actions: [ IconButton( icon: Icon( Icons.favorite, color: Colors.white, size: 24.0, ), onPressed: null), IconButton( icon: Icon( Icons.more_vert, color: Colors.white, size: 24.0, ), onPressed: () {}) ], expandedHeight: 250.0, flexibleSpace: FlexibleSpaceBar( background: GestureDetector( child: Stack(children: [ SizedBox( width: double.infinity, height: double.infinity, child: Hero( tag: widget.restaurant.id, child: FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: widget.restaurant.imgsrc, fit: BoxFit.cover), )), Align( alignment: Alignment(0, 0.9), child: FittedBox( // width: 200, // height: 50, fit: BoxFit.contain, child: BlurryContainer( padding: EdgeInsets.all(5), height: 45, blur: 6, borderRadius: BorderRadius.circular(20), child: SlowFadeIn( 1, Row( children: [ Icon(Icons.phone, color: AppColors.primaryColor), Text( '${widget.restaurant.contact['telephone']}', style: GoogleFonts.sansita(color: Colors.white), ), VerticalDivider(color: Colors.white), Icon(Icons.mail_outline, color: AppColors.primaryColor), Text( '${widget.restaurant.contact['email']}', style: GoogleFonts.sansita(color: Colors.white), ), ], ), ), ), ), ), ]), ), ), ), SliverToBoxAdapter( child: Container( color: AppColors.thirdColor, height: 800, child: Column( children: [ SingleChildScrollView( scrollDirection: Axis.horizontal, padding: EdgeInsets.all(5), child: SlowFadeIn( 1.3, Text(widget.restaurant.nom, textAlign: TextAlign.center, style: GoogleFonts.sansita(fontSize: 35)), ), ), SingleChildScrollView( scrollDirection: Axis.horizontal, padding: EdgeInsets.all(5), child: SlowFadeIn( 1.3, Text(widget.restaurant.adresse.toString(), textAlign: TextAlign.center, style: GoogleFonts.sansita( fontSize: 15, color: Colors.black12)), ), ), SlowFadeIn( 1.5, RatingBar( itemSize: 20, initialRating: 3, ignoreGestures: true, minRating: 1, direction: Axis.horizontal, allowHalfRating: true, itemCount: 5, itemPadding: EdgeInsets.symmetric(horizontal: 4.0), itemBuilder: (context, _) => Icon( Icons.star, color: Colors.amber, ), onRatingUpdate: (rating) { print(rating); }, ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 15), child: SlowFadeIn( 1.8, Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Badge( elevation: 0, badgeColor: Colors.white, shape: BadgeShape.square, borderRadius: 20, toAnimate: false, badgeContent: Row( children: [ FaIcon( FontAwesomeIcons.locationArrow, color: Pigment.fromString("#FC6A57"), size: 15, ), Text( " 12 min", style: GoogleFonts.roboto( color: Pigment.fromString("#FC6A57")), ) ], ), ), Badge( elevation: 0, badgeColor: Colors.white, shape: BadgeShape.square, borderRadius: 20, toAnimate: false, badgeContent: Row( children: [ FaIcon( FontAwesomeIcons.times, color: Pigment.fromString("#FC6A57"), size: 15, ), Text( " 12'", style: GoogleFonts.roboto( color: Pigment.fromString("#FC6A57")), ) ], ), ), ], ), ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: Row( children: [ComponentMenu(menus: widget.restaurant.menus)], ), ), Material( child: TabBar( controller: tabcon, labelPadding: EdgeInsets.all(5), labelColor: AppColors.primaryColor, unselectedLabelColor: Colors.black, indicator: MaterialIndicator( height: 4, color: Colors.red, topLeftRadius: 8, bottomLeftRadius: 8, bottomRightRadius: 8, topRightRadius: 8, horizontalPadding: 50, tabPosition: TabPosition.bottom, ), tabs: [ Tab( text: "Epa", ), Tab( text: "Epa", ), Tab( text: "Epa", ), Tab( text: "Epa", ), // Tab( // child: Text( // 'Dessert', // style: GoogleFonts.sansita(), // ), // ) ], ), ), Expanded( child: TabBarView( controller: tabcon, physics: BouncingScrollPhysics(), children: [ Container(color: Colors.red), Container(color: Colors.black), Container(color: Colors.green), Container(color: Colors.yellow), ], ), ), ], ), ), ), ], ), ); } } `

But i got always this error and on screen : just got blanc. i'm trying to put image

Hi,

I'm using your package because it looks really good. Everything works fine, however I found an annoying problem. If you call SetState inside a Stateful Widget which uses TabBar with no indicator, the default animation works as expected. But if you use the RectangularIndicator from your package as a argument, it doesn't work with the setState callback. The animation doesn't occur at all, the indicator is only jumping from one tab to another.

In most cases, I don't use TabBarView with the TabBar widget because I prefer to have more control over what is going on, and so I need to call setState. I'm sure I'm not the only dev who works without TabBarView.

If you can't reproduce the problem, let me know I'll make a demo.

column(
childen:[
TabBar(
        controller: tabController,
        indicatorWeight: 0,
        indicatorPadding: EdgeInsets.all(0),
        indicator: RectangularIndicator(color: Color(0xff486F8D)),
        tabs: [TimeAndLocationTabBarItem(), TimeAndLocationTabBarItem(), TimeAndLocationTabBarItem()]),
Container(
              padding: EdgeInsets.all(0),
              margin: EdgeInsets.all(0),
              width: 200,
              height: 200,
              color: Color(0xff486F8D),
              child: TabBarView(
                controller: tabController,
                children: [
                  Container(
                    width: 10,
                    height: 10,
                  ), Container(
                    width: 10,
                    height: 10,
                  ),
                  Container(
                    width: 10,
                    height: 10,
                  )
                ],
              ),
            )
]
)