How to transfer text from TextButton to ElevatedButton

user_19454412 0
Viewed 45

I would like to double-click on the TextButton to transfer text from it to the free ElevatedButton and disable the TextButton. And turn it on after double-clicking on the ElevatedButton containing the text. How can I do this?

 Column(
              children: [
                Wrap(
                  alignment: WrapAlignment.spaceEvenly,
                  spacing: 5.0, 
                  children: [
                    ElevatedButton(onPressed: () {}, child: Text('')),
                    ElevatedButton(onPressed: () {}, child: Text('')),
                    ElevatedButton(onPressed: () {}, child: Text('')),
                   
                  ],
                ),
                Wrap(
                  alignment: WrapAlignment.spaceEvenly,
                  spacing: 5.0,
                  children: [
                    TextButton(
                      style: TextButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: const Text('Text1'),
                    ),
                    TextButton(
                      style: TextButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: const Text('Teeeeeext2'),
                    ),
                    TextButton(
                      style: TextButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: const Text('Texxxxxxxxxxxxxxxxt3'),
                    ),
                    TextButton(
                      style: TextButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: const Text('Text4'),
                    ),
                    TextButton(
                      style: TextButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: const Text('Text5'),
                    ),
                  ],
                )
              ],
            ),
dart flutter button text
1 Answers

The following code would do the trick. Check out the live demo on DartPad

enter image description here

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class SlotData {
  final int fromTextButtonIndex;
  final String text;
  const SlotData(this.fromTextButtonIndex, this.text);
}

class _MyHomePageState extends State<MyHomePage> {
  static const numberOfElevatedButtons = 3;

  final freeSlots = List.generate(
    numberOfElevatedButtons,
    (int index) => index,
    growable: true,
  );
  final slots = <int, SlotData>{};

  final texts = <int, String>{
    0: 'Text1',
    1: 'Teeeeeext2',
    2: 'Texxxxxxxxxxxxxxxxt3',
    3: 'Text4',
    4: 'Text5',
  };

  _moveSlot(SlotData? textData, int slotIndex) {
    if (textData == null) return;
    setState(() {
      texts[textData.fromTextButtonIndex] = textData.text;
      slots.remove(slotIndex);
      freeSlots.add(slotIndex);
    });
  }

  _moveText(String text, int textIndex) {
    setState(() {
      if (freeSlots.isEmpty || texts[textIndex]!.isEmpty) {
        return;
      }
      final freeSlot = freeSlots.removeAt(0);
      slots[freeSlot] = SlotData(textIndex, text);
      texts[textIndex] = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Wrap(
              alignment: WrapAlignment.spaceEvenly,
              spacing: 5.0,
              children: [
                for (var i = 0; i < numberOfElevatedButtons; i++)
                  ElevatedButton(
                    onPressed: () => _moveSlot(slots[i], i),
                    child: Text(slots[i]?.text ?? ''),
                  ),
              ],
            ),
            Wrap(
              alignment: WrapAlignment.spaceEvenly,
              spacing: 5.0,
              children: [
                for (final textEntry in texts.entries)
                  TextButton(
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 20),
                    ),
                    onPressed: () => _moveText(textEntry.value, textEntry.key),
                    child: Text(textEntry.value),
                  ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
user_28283410
Related