Home > Blockchain >  Flutter toggle button using Getx for state management
Flutter toggle button using Getx for state management

Time:09-06

I'm making a toggle button to switch between the unit system, I need to do it using Getx for state management.

This code works, but its using setState() instead

This is the (simplified) code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({this.title});

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _tabTextIndexSelected = 0;
  final _listTextTabToggle = ["km / m", "m / ft"];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children:[
              FlutterToggleTab(
                selectedIndex: _tabTextIndexSelected,
                selectedBackgroundColors: const [
                  Colors.blue,
                  Colors.blueAccent
                ],
                selectedTextStyle: const TextStyle(
                    color: Colors.white),
                unSelectedTextStyle: const TextStyle(),
                labels: _listTextTabToggle,
                selectedLabelIndex: (index) {
                  setState(() {
                    _tabTextIndexSelected = index;
                  });
                },
                isScroll: false,
              ),
              Text(
                "Index selected : $_tabTextIndexSelected",
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Tried to add obs to the variable _tabTextIndexSelected and obx to everything that is supposed to change, but it doesn't work.

Also, I'm using enter image description here

  • Related