如何制作带有渐变的自定义标签栏

Question

如何使标签栏像下面的图像一样颤动？是否可以开发如下所示的Tabbar？如果不可能，那么下一个更好的解决方案是什么？

Answer 1

  This is just an example, modify as your need

  int viewChoice = 0; /* To change view by all or faveroties*/
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Toolbar Title',
          style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold/*fontSize,etc*/)),
    actions:[
      IconButton(
      icon:Icon(Icons.user_profile),
      onPressed:(){*/Todo when pressed*/}),
     ]
    ),
    body: Container(
      padding:EdgeInsets.all(10.0),
      child: Column(
         mainAxisSize: MainAxisSize.min,
         children:[
          Stack(
            children:[
              Container(
               alignment:Alignment.center,
                child:Text('Tem',
                     style:TextStyle(color:Colors.black,
                        fontWeight:FontWeight.bold,
                        fontSize:20.0)), //Tem is in your ex pic
              ),
              Positioned(
                top:50.0,
                left:40.0,
                right:40.0,
                child: Row(
                  mainAxisSize:MainAxisSize.min,
                  children:[
                     RaisedButton(
                       decoration:BoxDecoration(
                         gradient: viewChoice == 0 ?
                           LinearGradient(
                             colors:[/*as ur wish when selected*/],
                           ):
                           LinearGradient(
                             colors:[Colors.white],
                           ),
                         borderRadius: BorderRadius.circular(10.0),
                       ),
                       onPressed:(){
                         setState((){
                           viewChoice = 0;
                         });
                       },
                      child:Text('All',
                        /*style as your requirement*/),
                     ),
                      RaisedButton(
                       decoration:BoxDecoration(
                         gradient: viewChoice == 1 ?
                           LinearGradient(
                             colors:[/*as ur wish when selected*/],
                           ):
                           LinearGradient(
                             colors:[Colors.white],
                           ),
                         borderRadius: BorderRadius.circular(10.0),
                       ),
                       onPressed:(){
                         setState((){
                           viewChoice = 1;
                         });
                       },
                      child:Text('All',
                        /*style as your requirement*/),
                     ),
                   ]
                ),
              ),
            ]
          ),
         viewChoice == 0?
         ListView.builder(): /* or ur wish when all selected*/
         :ListView.builder(): /* or ur wish when favs selected*/
        ]
      ),
    ),
  );
}