Why flutter dynamic switch does not changing? - flutter

Question

I am trying to change switch, which are created dynamically by using future builder. it does not changing. Following is my script
bool disabledLanguage = false;
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
var postId = snapshot.data[index].id;
var postTranslate = snapshot.data[index].translate;
disabledLanguage = (postId == getLanguageId) ? true : false;
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: _singleSwitch(postId, postTranslate, disabledLanguage),
);
}
)
and below is function in which I added switch functionality
_singleSwitch(postId, postTranslate, disabledLanguage){
return Row(
children: [
Text(
postTranslate,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 16,
fontWeight: FontWeight.w700
)
),
Switch(
value: disabledLanguage,
onChanged: (value){
setState(() {
disabledLanguage=value;
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
)
],
);
}
When I try to switch any language, it does not changing, i mean if english by default enabled, when I click on it, it should change to disable. It is not happening. Can someone please help me. Thank you

Answer 1

You need to set postId value to getLanguageId instead of setting disabledLanguage.
Copy the below code to DartPad and try. Go through the code once, You'll understand.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
_State createState() => _State();
}
class _State extends State<MyApp> {
var getLanguageId = 1;
#override
Widget build(BuildContext context) {
var data = [
{
'id': 1,
'translate': 'Eng',
},
{
'id': 2,
'translate': 'Kan',
}
];
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tutorial - googleflutter.com'),
),
body: getListView(data)
);
}
getListView(data) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
var postId = data[index]['id'];
var postTranslate = data[index]['translate'];
var isdisabled = (postId == getLanguageId) ? true : false;
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: _singleSwitch(postId, postTranslate, isdisabled),
);
});
}
_singleSwitch(postId, postTranslate, isdisabled) {
print('#Im here for' + postTranslate);
return Row(
children: [
Text(postTranslate,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 16,
fontWeight: FontWeight.w700)),
Switch(
value: isdisabled,
onChanged: (value) {
setState(() {
getLanguageId = postId;
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
)
],
);
}
}

Answer 2

The problem is here:
setState(() {
disabledLanguage=value;
});
disabledLanguage is a function argument. You are updating a function argument and not an instance variable!
Declare an instance variable disabledLanguage,
and remove disabledLanguage from parameter list so that the value is persisted after the function call.
It should look something like this:
class MyWidgetState extends State<MyWidget> {
...
...
bool disabledLanguage = true; //<-- Declared as instance variable
_singleSwitch(postId, postTranslate){ //<-- Removed from parameter list
return Row(
children: [
Text(
postTranslate,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 16,
fontWeight: FontWeight.w700
)
),
Switch(
value: disabledLanguage,
onChanged: (value){
setState(() {
disabledLanguage=value;
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
)
],
);
}
}