Rebuilding a Widget in a column - flutter

Question

So I have 2 widgets in a column. 1 is a listview of containers and another is a Column of TabBar and TabBarView. I wrote this code which helps me store the current index is the TabView selected
TabController _tabController;
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 4);
_tabController.addListener(() {
globals.tabIndex = _tabController.index;
});
}
As per the image I want to change the color of the tile as the active listview changes (Active container is blue). The containers have an onTap functions which changes their color as they are pressed. Is there anyway I can rebuild the top containers when the listview Index changes?

Answer 1

You can simply call the setState function to rebuild the widget;
import 'dart:ui';
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Example(),
),
);
}
}
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
TabController _tabController;
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 4);
_tabController.addListener(() {
setState(() {});
});
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
_Item(
isActive: _tabController.index == 0,
onTap: () => _tabController.animateTo(0),
),
_Item(
isActive: _tabController.index == 1,
onTap: () => _tabController.animateTo(1),
),
_Item(
isActive: _tabController.index == 2,
onTap: () => _tabController.animateTo(2),
),
_Item(
isActive: _tabController.index == 3,
onTap: () => _tabController.animateTo(3),
),
],
),
TabBar(
controller: _tabController,
tabs: <Widget>[
_TabItem(
'one',
),
_TabItem('two'),
_TabItem('three'),
_TabItem('four'),
],
)
],
);
}
}
class _TabItem extends StatelessWidget {
final String title;
const _TabItem(this.title, {Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(color: Colors.black),
);
}
}
class _Item extends StatelessWidget {
final bool isActive;
final Function onTap;
const _Item({Key key, this.isActive, this.onTap}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
height: 80,
width: 50,
color: isActive ? Colors.blue : Colors.grey,
child: Text('hey'),
),
);
}
}

Answer 2

Hey there created a simple example to show how you would achieve this. Uses all the components you mentioned, tabBar, TabBarView, ListViewBuilder to create the list.
And onTap of the element use the tabController to animate to the Tab. And this subsequently trigger the addListener callaback which updates the currentSelected Index.
https://dartpad.dev/5f5475b790fe9a75b26c1f686adab96e