Flutter - Row added -> change the text of a container

Question

I'm quite inexperienced with flutter and have created this script.

When you tap on the red container you create a Row of buttons, I would like when I click on a button in the Row -> the text of the blue container becomes the same as the text contained in the tapped button

Anyone know how I can do?

Thank you :)

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

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

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele!';

  List<Container> OutputList = [];

  void tool(String text) async {
    List ListText = text.split(' ');

    for (var i in ListText) {
      OutputList.add(
        Container(
          child: GestureDetector(
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(i),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  tool(text);
                  print(OutputList);
                });
              },
              child: Container(
                width: 150.0,
                height: 50.0,
                color: Colors.red,
                child: Center(child: Text('START ->')),
              ),
            ),
            SizedBox(height: 50.0),
            Row(
              children: OutputList,
            ),
            SizedBox(height: 50.0),
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 50.0,
              child: Text(''),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Yes you can add a few line of code check here i try to solve.

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

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

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele!';
  
  //step 1 create variable
  
  String newGeneratedText = "";

  List<Container> OutputList = [];

  void tool(String text) async {
    List ListText = text.split(' ');

    for (var i in ListText) {
      OutputList.add(
        Container(
          child: GestureDetector(
            onTap: () {
              //add logic here to concatinate values
              setState(() {
                newGeneratedText = newGeneratedText + " " + i;//added " " for one space
              });
            },
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(i),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  tool(text);
                  print(OutputList);
                });
              },
              child: Container(
                width: 150.0,
                height: 50.0,
                color: Colors.red,
                child: Center(child: Text('START ->')),
              ),
            ),
            SizedBox(height: 50.0),
            Wrap( // added for fixing more values and solve overflow exceptions error
              children: OutputList,
            ),
            SizedBox(height: 50.0),
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 50.0,
              child: Text(newGeneratedText), //final print values
            ),
          ],
        ),
      ),
    );
  }
}