Flutter: How can use RadioListTile with flutter cubit? - flutter

Question

I am not able to make RadioListTile works. It isn't selected and unselected on click
Can you help me?
Here is me code
edit
...
final ownedController =TextEditingController();
...
RadioListTile<
String>(
value:'not owned',
groupValue:ownedController.text,
toggleable:true,
title: const Text('Owned'),
onChanged:(String) {
cubit.changeOwned(ownedController.text);
}),
...
cubit
...
bool isOwned = false;
String changeOwned(String owned) {
isOwned = !isOwned;
if (isOwned == true) {
owned = 'owned';
} else {
owned = 'not owned';
}
return owned;
}
...

Answer 1

Here is an example based on the enum it is more flexible and easier to add more objects in the future. Enum values can also be converted to the string and represented your user interface in a readable form.
Just copy and paste into DartPad to play with it:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => SomeCubit(),
child: const MaterialApp(
home: SomeView(),
),
);
}
}
class SomeView extends StatelessWidget {
const SomeView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('My App')),
body: BlocBuilder<SomeCubit, SomeStatus>(
builder: (context, state) {
return Column(
children: [
for (var value in SomeStatus.values)
RadioListTile<String>(
title: Text(value.titleByIndex), // <- Title by extension.
value: value.name,
groupValue: state.name,
toggleable: true,
selected: value.name.contains(state.name),
onChanged: context.read<SomeCubit>().onChanged,
),
],
);
},
),
);
}
}
enum SomeStatus { owned, notOwned }
class SomeCubit extends Cubit<SomeStatus> {
SomeCubit() : super(SomeStatus.notOwned);
void onChanged(String? name) {
emit(SomeStatus.values.byName(name ?? state.name));
}
}
extension SomeStatusEx on SomeStatus {
// A useful function for converting value names to UI view.
// List ordering must contain enum values.
String get titleByIndex => ['Owned', 'Not Owned'].elementAt(index);
}
With Dart 2.17 and above:
// Dart 2.17 can convert enum value to any value
// and you do not need to create an extension to put a nicer value name to the view.
enum SomeStatus {
owned('Owned'),
notOwned('Not Owned');
const SomeStatus(this.label);
// View in the user interface "title: Text(value.label)"
final String label;
}

Answer 2

you can avoid using cubit to switch state.
...
final ownedController = TextEditingController();
bool isOwned = false;
String get ownedString => isOwned ? 'owned' : 'not owned';
...
RadioListTile<String>(
value: ownedString,
groupValue: 'owned',
toggleable: true,
title: Text(ownedString),
onChanged: (x) {
setState(() {
isOwned = !isOwned;
ownedController.text = ownedString;
});
},
),
...
you have to fix the toggleGroupe to 'owned' otherwise you'll have wrong display.