Show button's value in Text when it is pressed - Flutter

Question

I want when any key is pressed so it should show in Text widget(in place of data) [please see below image]. For Example 1 is pressed so 1, then I press 2 so, it should show 12, etc. Then, if I press call end(bottomright button) so, that field should be cleared.

Image is here

Let me add code below,

Column(
    [
     Text("data"),
     Row(
         mainAxisAlignment: MainAxisAlignment.spaceAround,
         children: [
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("1")),
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("2")),
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("3")),
                ],
              ),
.........
     ],
    )

Widget defaultContainer(String value) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        boxShadow: const [BoxShadow(blurRadius: 5)],
        color: colors[random.nextInt(8)],
      ),
      child: Center(
          child: Text(
        value,
        style: const TextStyle(fontSize: 30),
      )),
    );
  }

Hope, I could explain.

Answer 1

You can archive this by declaring a variable to store the number and having a function that appends a digit to the number when pressed.

Try the below snippet:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String number = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(number),
            Wrap(
              alignment: WrapAlignment.center,
              children: [
                defaultContainer("1"),
                defaultContainer("2"),
                defaultContainer("3"),
                defaultContainer("4"),
                defaultContainer("5"),
                defaultContainer("6"),
                defaultContainer("7"),
                defaultContainer("8"),
                defaultContainer("9"),
                defaultContainer("0"),
                defaultContainer("0", isClear: true),
              ]
            )
          ],
        ),
      ),
    );
  }
  
  Widget defaultContainer(String value, {bool? isClear}) {
    return InkWell(
    onTap: (){
      setState((){
        if(isClear??false){
          number = "";
        } else {
          number += value;
        }
      });
    },
      child: Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        boxShadow: const [BoxShadow(blurRadius: 5)],
        color: Colors.white,
      ),
      child: Center(
          child: isClear??false?
        const Icon(Icons.call_end):
        Text(
        value,
        style: const TextStyle(fontSize: 30),
      )),
    )
    );
  }
}

Answer 2

You can user a String type "data" to save your data: add value to list when press number button, and set data = '' when press call end button.

Answer 3

create a String variable:

String data = "data";

then, make sure you are using stateful class and add this inside onTap function:

    setState((){
      data = "1"; 
      //2,3,4......,12 
      //do this for all and to clear just add empty string ""
    }):

Answer 4

You need to give the "data" dynamically. Example:

String inputValue = '';

then you can use like this:

Column(
    children: [
      Text(inputValue),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '1';
              });
            },
            child: defaultContainer("1"),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '2';
              });
            },
            child: defaultContainer("2"),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '3';
              });
            },
            child: defaultContainer("3"),
          ),
        ],
      ),
      GestureDetector(
         onTap: () {
            if (inputValue.isNotEmpty) {
              setState(() {
                //if you want to clear one by one
                inputValue = _inputValue.substring(0, inputValue.length - 1);
                //if you want to clear all
                inputValue = "";
              });
            }
          },
          child: defaultContainer("end_icon"),
        ),
      ],
    ),
  ],
),