GetX - Sample TabBar

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(HomeController());

    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: controller.tabController,
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: controller.tabController,
        children: [
          CarPage(),
          BikePage(),
        ],
      ),
    );
  }
}

class HomeController extends GetxController with SingleGetTickerProviderMixin {
  TabController tabController;

  @override
  void onInit() {
    tabController = TabController(vsync: this, length: 2);
    super.onInit();
  }
}

class CarPage extends StatefulWidget {
  @override
  _CarPageState createState() => _CarPageState();
}

class _CarPageState extends State<CarPage> with AutomaticKeepAliveClientMixin {
  final controller = Get.put(CarPageController());

  @override
  Widget build(BuildContext context) {
    print('>>> Build Car Page');
    super.build(context);
    return Center(
      child: Obx(() => Text(controller.car.value)),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class CarPageController extends GetxController {
  final car = ''.obs;

  @override
  void onInit() {
    print('Call API Car'); // called only once
    car.value = 'Ferrari';
    super.onInit();
  }
}

class BikePage extends StatefulWidget {
  @override
  _BikePageState createState() => _BikePageState();
}

class _BikePageState extends State<BikePage>
    with AutomaticKeepAliveClientMixin {
  final controller = Get.put(BikePageController());

  @override
  Widget build(BuildContext context) {
    print('>>> Build Bike Page');
    super.build(context);
    return Center(
      child: Obx(() => Text(controller.bike.value)),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class BikePageController extends GetxController {
  final bike = ''.obs;

  @override
  void onInit() {
    print('Call API Bike'); // called only once
    bike.value = 'BMC';
    super.onInit();
  }
}

the log

Restarted application in 395ms.
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
[GETX] Instance "HomeController" has been created
[GETX] Instance "HomeController" has been initialized
[GETX] Instance "CarPageController" has been created
flutter: CarPageController - onInit
[GETX] Instance "CarPageController" has been initialized
flutter: >>> Build Car Page - 0
flutter: Call API Car Start
flutter: Ferrari - 0
flutter: Call API Car End
flutter: >>> Build Car Page - 1
flutter: Call API Car Start
flutter: Ferrari - 1
flutter: Call API Car End
flutter: >>> Build Car Page - 2
flutter: Call API Car Start
flutter: Ferrari - 2
flutter: Call API Car End

when the TabView switches to 0, the data shows Ferrari-2, it is incorrect

the log

when the TabView switches to 0, the data shows Ferrari-2, it is incorrect

What would be the solution?

I have some questions to ask you

The following code ：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp(home: Home()));
}

final List<Tab> tabs = [
  Tab(icon: Icon(Icons.directions_car)),
  Tab(icon: Icon(Icons.directions_bike)),
  Tab(icon: Icon(Icons.directions_boat)),
];

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(HomeController());

    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: controller.tabController,
          tabs: tabs,
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: controller.tabController,
        children: List.generate(
          tabs.length,
          (index) => TabPage(
            index: index,
          ),
        ),
      ),
    );
  }
}

class HomeController extends GetxController with SingleGetTickerProviderMixin {
  TabController tabController;
  @override
  void onInit() {
    tabController = TabController(vsync: this, length: tabs.length);
    super.onInit();
  }
}

class TabPage extends StatefulWidget {
  final int index;

  const TabPage({Key key, this.index}) : super(key: key);

  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with AutomaticKeepAliveClientMixin {
  final controller = Get.put(CarPageController());

  @override
  Widget build(BuildContext context) {
    print('>>> Build Car Page - ${widget.index}');
    controller.cid = widget.index;
    super.build(context);
    return Center(
      child: GetBuilder<CarPageController>(
        initState: (_) => controller.loadData(),
        builder: (_) =>
            !controller.loading ? Text('loading...') : Text(controller.car),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class CarPageController extends GetxController {
  int _cid = 0;
  int get cid => _cid;
  set cid(int cid) {
    _cid = cid;
  }

  bool _loading = false;
  bool get loading => _loading;

  String _car = '';
  String get car => _car;

  @override
  void onInit() {
    super.onInit();
    print('CarPageController - onInit');
  }

  void loadData() async {
    print('Call API Car Start');
    _loading = false;
    await Future.delayed(Duration(seconds: 1));
    _car = 'Ferrari - $_cid';
    print('Ferrari - $_cid');
    _loading = true;
    print('Call API Car End');
    update();
  }
}

Don't use AutomaticKeepAliveClientMixin TabView when switching to request data, so not too friendly. Use the AutomaticKeepAliveClientMixin, TabPage when switching data according to the last request. TabView toggles how to create a new Controller so that the data is correct.

Any Solution on this

good job (: