How can I implement obx to a TabBar? - flutter

Question

I want to implement this piece of code to my TabBar but, I don't know how:
SizedBox(
height: 25,
child: Obx(
() => Text(
_countDownController.currentTypeRoundString.value,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
),
This is my TabBar code:
import 'package:flutter/material.dart';
import 'package:get/get.dart%20';
import 'package:google_fonts/google_fonts.dart';
import 'package:pomodoro/3.tomatoes_interval_UI/countdown_controller.dart';
import '../../5.hourglass_animation/countdown_timer/responsive_web.dart';
class PomodoroIntervals extends StatefulWidget {
const PomodoroIntervals({Key? key}) : super(key: key);
#override
State<PomodoroIntervals> createState() => _PomodoroIntervalsState();
}
class _PomodoroIntervalsState extends State<PomodoroIntervals>
with TickerProviderStateMixin {
final CountDownController _countDownController = Get.find();
final ScrollController _horizontal = ScrollController();
late TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
_countDownController.createAnimationController(this);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
double progress = 1.0;
bool LongBreak = true;
#override
Widget build(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: AnimatedBuilder(
animation: _countDownController.controller,
builder: (context, child) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(22),
child: Container(
color: Colors.transparent,
child: SafeArea(
child: ResponsiveWeb(
child: Column(
children: <Widget>[
TabBar(
controller: _tabController,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(
color: Color(0xff3B3B3B), width: 2.0),
insets: EdgeInsets.fromLTRB(
12.0, 12.0, 12.0, 12.0)),
indicatorWeight: 5,
indicatorSize: TabBarIndicatorSize.label,
labelColor: const Color(0xff3B3B3B),
labelStyle: GoogleFonts.nunito(
fontSize: 16.0,
// letterSpacing: 1,
fontWeight: FontWeight.w500),
unselectedLabelColor: const Color(0xffD7D7D7),
tabs: const [
Tab(
text: "Pomodoro",
icon: Icon(Icons.work_history_outlined,
size: 24),
),
Tab(
text: "Short break",
icon: Icon(Icons.ramen_dining_outlined,
size: 24),
),
Tab(
text: "Long break",
icon: Icon(
Icons.battery_charging_full_outlined,
size: 24),
),
])
],
),
),
),
),
),
),
// body: TabBarView(
// controller: _tabController,
// children: <Widget>[
// const Center(
// child: ToDoPage(),
// ),
// const Center(
// child: Text('Short break'),
// ),
// const Center(child: Text('Long break')),
// ],
// ),
),
);
},
),
);
}
}
Packages used in countdown controller:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pausable_timer/pausable_timer.dart';
import 'package:pomodoro/3.tomatoes_interval_UI/custom_timer_painter.dart';
import 'package:pomodoro/3.tomatoes_interval_UI/logger.dart';
import 'package:pomodoro/3.tomatoes_interval_UI/ring_controller.dart';
import 'projects_controller.dart';
import 'settings_controller.dart';
How can I program that the strings "pomodoro", "short break" and "long break " change automatically with the _countDownController.currentTypeRoundString.value, property?
Thanks for any help you can provide