toggle button value display in flutter

Question

greeting to all,

I want to display and store the value used in the toggle button when I click them. here I am getting a bit clueless.

below is my code where I have made the toggle button -:

import 'package:flutter/material.dart';
import 'package:hitch_fun1/Components/constants.dart';
import 'package:hitch_fun1/Components/Reusable_card.dart';
import 'package:flutter/cupertino.dart';

class sample extends StatefulWidget {
  @override
  _sampleState createState() => _sampleState();
}

class _sampleState extends State<sample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomModalSheet'),
      ),
      body: InkWell(
          child: TextField(
            decoration: InputDecoration(
              enabled: false,
              suffixIcon: Padding(
                padding: EdgeInsets.only(top: 15),
                child: Icon(Icons.add),
              ),
              prefixIcon: Padding(
                padding: EdgeInsets.only(top: 15),
                child: Icon(Icons.favorite_border_rounded),
              ),
            ),
          ),
          onTap: () {
            _showBottomSheet(context);
          }),
    );
  }

  List<bool> isSelected;

  @override
  void initState() {
    isSelected = [false, false, false];
    super.initState();
    focusToggle = [focusNodeButton1, focusNodeButton2, focusNodeButton3];
  }

  FocusNode focusNodeButton1 = FocusNode();
  FocusNode focusNodeButton2 = FocusNode();
  FocusNode focusNodeButton3 = FocusNode();
  List<FocusNode> focusToggle;

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    focusNodeButton1.dispose();
    focusNodeButton2.dispose();
    focusNodeButton3.dispose();
    super.dispose();
  }

  _showBottomSheet(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext c) {
          return StatefulBuilder(
            builder: (BuildContext context,
                void Function(void Function()) setState) {
              return Container(
                  height: 250,
                  child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          child: ToggleButtons(
                            // borderColor: Colors.black,
                            fillColor: Colors.white,
                            borderWidth: 4,
                            selectedBorderColor: Colors.pink,
                            selectedColor: Colors.pinkAccent,
                            splashColor: Colors.deepOrange[400],
                            focusNodes: focusToggle,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(30),
                                bottomRight: Radius.circular(30)),
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Text(
                                  'you',
                                  style: TextStyle(fontSize: 16),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Text(
                                  'me',
                                  style: TextStyle(fontSize: 16),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Text(
                                  'them',
                                  style: TextStyle(fontSize: 16),
                                ),
                              ),
                            ],
                            onPressed: (int index) {
                              setState(() {
                                for (int i = 0; i < isSelected.length; i++) {
                                  isSelected[i] = i == index;
                                }
                                print(isSelected[index].toString());
                              });
                            },
                            isSelected: isSelected,
                          ),
                        ),
                      ]));
            },
          );
        });
  }
}

now I want to display the value selected in the toggle button and display it in the TextField above that is disabled. can anyone tell me how to do this?

Answer 1

add a TextEditingController to the TextField, then in the the onPressed on the toggle button, assign the toggle button value to the controller, like textFieldController.text = isSelected[index].toString()

UPDATE: you can set the 3 values you have in a list, var values = ['me','you','them']; then in the onPresed do this textEditingController.text = values[index]; i think this will do the trick