keyboard.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wall Clock',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Music Player'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<int> data = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text(widget.title),
      ),
      body: Container(
        color: Color(0xFF2D2F41),
        alignment: Alignment.center,
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: MediaQuery.of(context).size.width * 0.8,
                child: Wrap(
                  children: data
                      .map((e) => Text(
                            e.toString(),
                            style: TextStyle(color: Colors.white, fontSize: 50),
                          ))
                      .toList(),
                ),
              ),
              Container(
                child: touchPad(
                  context,
                  press0: () {
                    setState(
                      () {
                        data.add(0);
                      },
                    );
                  },
                  press1: () {
                    setState(
                      () {
                        data.add(1);
                      },
                    );
                  },
                  press2: () {
                    setState(
                      () {
                        data.add(2);
                      },
                    );
                  },
                  press3: () {
                    setState(
                      () {
                        data.add(3);
                      },
                    );
                  },
                  press4: () {
                    setState(
                      () {
                        data.add(4);
                      },
                    );
                  },
                  press5: () {
                    setState(
                      () {
                        data.add(5);
                      },
                    );
                  },
                  press6: () {
                    setState(
                      () {
                        data.add(6);
                      },
                    );
                  },
                  press7: () {
                    setState(
                      () {
                        data.add(7);
                      },
                    );
                  },
                  press8: () {
                    setState(
                      () {
                        data.add(8);
                      },
                    );
                  },
                  press9: () {
                    setState(
                      () {
                        data.add(9);
                      },
                    );
                  },
                  pressDel: () {
                    if (data.length > 0) {
                      setState(
                        () {
                          data.removeLast();
                        },
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: _incrementCounter,
      //   tooltip: 'Increment',
      //   child: Icon(Icons.add),
      // ),
    );
  }
}

typedef VoidCallback = void Function();
Color bPurple = Colors.purple;
Color bWhite = Colors.white;
Widget touchPad(context,
    {VoidCallback? press1,
    VoidCallback? press2,
    VoidCallback? press3,
    VoidCallback? press4,
    VoidCallback? press5,
    VoidCallback? press6,
    VoidCallback? press7,
    VoidCallback? press8,
    VoidCallback? press9,
    VoidCallback? press0,
    VoidCallback? pressDone,
    VoidCallback? pressDel}) {
  return Container(
    height: MediaQuery.of(context).size.height * 0.4,
    width: MediaQuery.of(context).size.width * 0.9,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: press1,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Text(
                        "1",
                        style: TextStyle(
                            fontSize: 24.0,
                            fontWeight: FontWeight.w300,
                            color: bWhite),
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press2,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "2",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "ABC",
                            style: TextStyle(
                                fontSize: 8.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press3,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "3",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "DEF",
                            style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: press4,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "4",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "GHI",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press5,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "5",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "JKL",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press6,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "6",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "MNO",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: press7,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "7",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "PQRS",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press8,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "8",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "TUV",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press9,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        children: [
                          Text(
                            "9",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                          Text(
                            "WXYZ",
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: pressDel,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.grey),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.backspace_outlined,
                            color: bWhite,
                            size: 30,
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: press0,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple.withOpacity(0.5)),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "0",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: pressDone,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: bPurple),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "DONE",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w300,
                                color: bWhite),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}