Search code examples
fluttercubitflutter-cubit

Flutter: How can use RadioListTile with flutter cubit?


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;
  }
...

Solution

  • 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;
    }