How to hide the tab name by clicking seach in flutter - flutter

Question

I'm still new in flutter, does anyone know how to make the search in the tab card like picture below:
I try to figure it out how to solve this problem but still be like this:
Here is My code that I try to solve, I'm using the custom card, the custom dialog :
class TabbedCard extends StatefulWidget {
final List<Tab> tabs;
final List<Widget> children;
final bool showDeleteBtn;
final bool showPrimaryBtn;
const TabbedCard(
{Key? key,
required this.tabs,
required this.children,
this.showDeleteBtn = false,
this.showPrimaryBtn = true})
: super(key: key);
#override
State<TabbedCard> createState() => _TabbedCardState();
}
class _TabbedCardState extends State<TabbedCard> with TickerProviderStateMixin {
#override
Widget build(BuildContext context) {
double _scrHeight = MediaQuery.of(context).size.height - 150;
// String searchText = "";
TextEditingController textController = new TextEditingController();
TabController _controller =
TabController(length: widget.tabs.length, vsync: this);
TabBar _tabBar = new TabBar(
isScrollable: true,
labelColor: kPrimaryColor,
unselectedLabelColor: kTextGray,
controller: _controller,
tabs: widget.tabs,
);
return Container(
constraints: BoxConstraints(minHeight: _scrHeight),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(
vertical: 1,
horizontal: 1,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.5),
spreadRadius: -4,
blurRadius: 35,
offset: const Offset(0, 9), // changes position of shadow
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topLeft,
child: Row(
children: [
AnimSearchBar(
width: 400,
textController: textController,
onSuffixTap: (value) {
setState(() {});
},
),
const SizedBox(width: 10),
_tabBar,
const SizedBox(width: 10),
],
)),
const SizedBox(height: 10),
Container(
height: 440,
child: TabBarView(
controller: _controller,
children: widget.children,
),
),
],
),
),
const SizedBox(height: 10),
],
),
),
);
}
}
Really appreciate if anyone can help me with this problem ^^

Answer 1

You can try this:
first create bool showSearchView = false, then create two widget like this:
_tabView() {
return Row(
children: [
Container(
color: Colors.red,
width: 100,
height: 40,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
color: Colors.red,
width: 100,
height: 40,
),
Container(
color: Colors.red,
width: 100,
height: 40,
),
],
);
}
and
_searchView() {
return TextField();
}
then, use it like this:
Row(
children: [
InkWell(
onTap: () {
setState(() {
showSearchView = !showSearchView;
});
},
child: Icon(showSearchView ? Icons.close : Icons.search),
),
Expanded(
child: showSearchView ? _searchView() : _tabView(),
),
],
),