Forem: Anand C

🧮 Build Your Own `wc` Tool in Java — A Minimal Clone of the Unix Word Count Utility

Anand C — Sat, 31 May 2025 18:32:03 +0000

If you've ever used a Linux terminal, you're probably familiar with the wc command — a simple yet powerful utility that prints the number of lines, words, and bytes (or characters) in a file or input stream. As part of my learning journey in Java and systems programming, I decided to implement a basic clone of the wc tool in Java.

In this blog post, I'll walk you through what I've built, what works, what doesn't (yet), and share the code for anyone looking to experiment or contribute.

🚀 Project Overview

🔗 GitHub Repository: github.com/anandshaji679322/WC-Tool

✅ Features Implemented

This tool supports the following options, just like the original wc:

-c: Count bytes
-m: Count characters
-w: Count words
-l: Count lines

It works both with file input and standard input (stdin) for most flags.

🛠️ Technologies Used

Java
Basic I/O: FileInputStream, FileReader, Scanner
Stream handling with System.in and custom logic

📦 How to Use

1. Count bytes in a file:

java ccwc -c test.txt

2. Count words from stdin:

cat test.txt | java ccwc -w

3. Count lines from stdin:

cat test.txt | java ccwc -l

4. Count characters from stdin:

cat test.txt | java ccwc -m  # ❌ Not yet fully working

⚠️ Known Issues

🧪 Currently, the -c (byte count) and -m (character count) flags do not work correctly when used with stdin (cat file | java ccwc -c).

I attempted different approaches to fix this issue, including using BufferedOutputStream and InputStreamReader to handle the input stream, but both methods did not resolve the problem.

🔍 Code Highlights

Here’s an example of how I count words from a file:

static int wordCountFile(String fileName) throws FileNotFoundException {
    int count = 0;
    try (Scanner sc = new Scanner(new File(fileName))) {
        while (sc.hasNext()) {
            count++;
            sc.next();
        }
    }
    return count;
}

📚 What I Learned

Handling standard input (System.in) in Java requires careful stream management.
When designing CLI tools, it’s important to handle edge cases like invalid flags and argument lengths.
Java's Scanner is a simple but effective class for parsing input.
Working with byte vs character streams teaches you a lot about encoding.

📈 What’s Next

If I revisit this project, I want to:

✅ Fix the stdin issue for -c and -m
➕ Add support for multiple flags at once (like wc -cwm file.txt)
📦 Package it as a standalone .jar with command-line installation instructions

👨‍💻 Conclusion

This was a great mini-project that helped me get hands-on with Java’s I/O system while building a tool similar to a real-world Unix utility.

If you're learning Java or preparing for systems programming interviews, I highly recommend trying something similar!

Feel free to fork the project or contribute on GitHub:

🔗 github.com/anandshaji679322/WC-Tool

Creating a Simple Calculator UI with Flutter: Inspired Design from Dribbble

Anand C — Thu, 29 Jun 2023 12:27:08 +0000

Welcome to this tutorial where we'll be enhancing the UI of a simple calculator app using Flutter, drawing inspiration from a beautiful design on Dribbble. In this tutorial, we'll explore how to transform the appearance of the calculator app by implementing a captivating and user-friendly user interface.

Calculators are a common tool, and by improving the UI of our calculator app, we can create a visually appealing and engaging user experience. We'll walk through the step-by-step process of refining the design elements, making it more intuitive and aesthetically pleasing.

To begin, we'll set up our Flutter project and ensure we have the necessary dependencies installed. With the foundation in place, we'll dive into modifying the existing UI to align with the design from Dribbble. By leveraging Flutter's powerful widget system, we'll customize buttons, layouts, and colors to give the calculator a fresh and captivating look.

Throughout the tutorial, we'll focus solely on the UI enhancements, making adjustments to the visual elements and overall styling. We'll pay attention to details such as typography, color schemes, spacing, and alignment to create a visually coherent and delightful UI.

By the end of this tutorial, you'll have a transformed calculator app with an upgraded user interface, making it more visually appealing and user-friendly. You'll gain valuable experience in modifying Flutter UI components and exploring design concepts to enhance the overall look and feel of your applications.

So, let's embark on this journey to elevate the UI of our calculator app using Flutter, drawing inspiration from a stunning design on Dribbble!

Setting Up the Flutter App's Root Structure

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',

      home: MyHomePage(),
    );
  }
}

The main() function serves as the entry point of the Flutter app. It runs the app by calling runApp() and passing in an instance of the MyApp class.

The MyApp class is a StatelessWidget that represents the root of the application. It overrides the build method to return a MaterialApp widget, which configures the app's settings and theme.

Within the MaterialApp, the debugShowCheckedModeBanner property is set to false to hide the debug banner, and the title property is set to "Flutter Demo".

The home property of MaterialApp is set to an instance of MyHomePage, which will be the initial screen of your app.

The MyHomePage class, which is not provided in the code snippet, should be defined as a StatelessWidget or StatefulWidget and represent the main screen of your app. It should be responsible for rendering the UI and handling user interactions.

Overall, the code sets up the basic structure of the app and configures the root of the application with the MaterialApp. You can proceed to implement the MyHomePage class to build and customize the UI and functionality of your app.

Basic Home Screen Structure

import 'package:flutter/material.dart';

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff22252D),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 240.0,
                color: Color(0xff22252D),
                padding: EdgeInsets.only(top: 150.0),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xff292D36),
                  ),

                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The provided code represents the MyHomePage class, which serves as the main screen of your calculator app.

Inside the build method, a Scaffold widget is returned, providing the basic structure for the app layout. The Scaffold contains a SafeArea widget to ensure the content is displayed within the safe area of the device screen.

The main content is wrapped inside a Container widget, which has a background color of Color(0xff22252D). This container represents the main body of the screen and is divided into two sections.

Display Section:
- This section is represented by a Container with a height of 240.0 and the same background color as the main container.
- Currently, there is no content inside this container, as the code only sets its height and background color.
- This section is represented by an Expanded widget, which takes up the remaining available space in the container.
- Inside the Expanded widget, there is a Container that serves as the background for the button section, with a color of Color(0xff292D36).
- Currently, there is no content inside this container, as the code only sets its color.

Overall, the code provides the basic structure for the main screen of your calculator app. As shown below👇

Basic Calculator UI Implementation

import 'package:flutter/material.dart';

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff22252D),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 240.0,
                color: Color(0xff22252D),
                padding: EdgeInsets.only(top: 150.0),
//New changes happen below 👇
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        // fontWeight: FontWeight.bold,
                        fontSize: 25.0,
                        color: Colors.white,
                      ),
                      "302 x 75",
                    ),
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 45.0,
                        color: Colors.white,
                      ),
                      "22650",
                    ),
                  ],
                ),

              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xff292D36),
                  ),

                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Inside the first Container, a Column widget is added. This allows for the vertical arrangement of multiple child widgets.
Within the Column widget, two Text widgets are added. These are used to display text elements on the screen.
The first Text widget is aligned to the right (textAlign: TextAlign.right) and styled with a font size of 25.0 and white color.
The text content of the first Text widget is set to "302 x 75", which is dummy data used for setting up the UI.
The second Text widget is also aligned to the right and styled with a font size of 45.0, white color, and a bold font weight.
The text content of the second Text widget is set to "22650", which is also dummy data used for setting up the UI..

These changes enhance the appearance of the home screen by adding a visually appealing section with two text elements that display dummy data, specifically "302 x 75" and "22650". Please note that these values are placeholders and can be replaced with actual data in your calculator app in further steps.

First row of button

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff22252D),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 240.0,
                color: Color(0xff22252D),
                padding: EdgeInsets.only(top: 150.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        // fontWeight: FontWeight.bold,
                        fontSize: 25.0,
                        color: Colors.white,
                      ),
                      "302 x 75",
                    ),
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 45.0,
                        color: Colors.white,
                      ),
                      "22650",
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xff292D36),
                  ),
                  child: Column(
                    children: [
//New changes happen below 👇
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 20.0),
                            child: TextButton(
                              onPressed: () {
                                print("ac");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "AC",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 20.0),
                            child: TextButton(
                              onPressed: () {
                                print("+/-");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "+/-",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 20.0),
                            child: TextButton(
                              onPressed: () {
                                print("ac");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.divide,
                                color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6)),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 20.0),
                            child: TextButton(
                              onPressed: () {
                                print("ac");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text("AC"),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The updated code focuses on improving the calculator interface by introducing a button UI and utilizing the TextButton widget for interactive functionality. The code includes the implementation of various buttons that are essential for performing calculator operations.

The buttons are arranged in a Row widget, enabling them to be displayed horizontally, creating a compact and visually appealing layout. Each button is styled with specific attributes such as size, background color, and text/icon color to ensure consistency and aesthetic appeal.

To accommodate the buttons and other elements of the calculator interface, a Column widget is introduced within an Expanded container. This arrangement allows for proper spacing and layout management, ensuring a visually coherent and organized interface.

The newly added buttons provide essential functionality to the calculator. For instance, the "AC" button, when pressed, clears the input and resets the calculator, providing a convenient way to start fresh. The "+/-" button allows users to change the sign of the displayed number, facilitating calculations involving positive and negative values.

Additionally, a "mod" button is included, represented by the "%" symbol. This button performs the modulus operation, calculating the remainder of a division operation. It offers an essential feature for users working with modular arithmetic.

The TextButton widget is used to create these buttons, providing a responsive and interactive user experience. Each button is styled with attention to detail, ensuring visual coherence and intuitive design. The size, background color, and text/icon color are carefully selected to match the overall aesthetics of the calculator interface.

By incorporating these changes, the calculator UI becomes more interactive and user-friendly. Users can now perform calculations and operations efficiently by utilizing the provided buttons. The enhanced button functionality enhances the overall usability and user experience of the calculator app.

This comprehensive update brings a more engaging and functional calculator interface, making it easier for users to perform calculations and interact with the app effectively.

A Sleek and Intuitive Interface for a Basic Calculator

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff22252D),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 240.0,
                color: Color(0xff22252D),
                padding: EdgeInsets.only(top: 150.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        // fontWeight: FontWeight.bold,
                        fontSize: 25.0,
                        color: Colors.white,
                      ),
                      "302 x 75",
                    ),
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 45.0,
                        color: Colors.white,
                      ),
                      "22650",
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xff292D36),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("ac");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "AC",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("+/-");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.minus_slash_plus,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xff26E8C6)),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("%");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "%",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xff26E8C6),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("/");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.divide,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xffE78388)),
                              ),
                            ),
                          ),
                        ],
                      ),
//New Changes happen below👇
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("7");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "7",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("8");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "8",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("9");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "9",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("x");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.multiply,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xffE78388)),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("4");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "4",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("5");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "5",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("6");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "6",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("-");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.minus,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xffE78388)),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("1");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "1",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("2");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "2",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("3");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "3",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("+");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.plus,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xffE78388)),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("reset");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.restart,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("0");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                "0",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print(".");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Text(
                                ".",
                                style: TextStyle(
                                  fontSize: 25.0,
                                  color: MaterialStateColor.resolveWith(
                                        (states) => Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 20.0, top: 10.0),
                            child: TextButton(
                              onPressed: () {
                                print("=");
                              },
                              style: ButtonStyle(
                                  fixedSize: MaterialStateProperty.all(
                                      Size(75.0, 70.0)),
                                  backgroundColor: MaterialStateProperty.all(
                                      Color(0xff272B34))),
                              child: Icon(
                                CupertinoIcons.equal,
                                size: 30.0,
                                color: MaterialStateColor.resolveWith(
                                        (states) => Color(0xffE78388)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The updated code introduces several new features to the calculator interface. Here's a breakdown of the changes:

Plus/Minus Button: The code includes a "±" button represented by the CupertinoIcons.minus_slash_plus icon. This button allows users to toggle between positive and negative numbers, providing flexibility in performing calculations.
Percentage Button: The code introduces a "%" button, allowing users to calculate percentages easily. This button enables users to calculate values like discounts, interest rates, or any other percentage-based calculations.
Styling Changes: The code incorporates some styling changes to enhance the visual appeal and usability of the calculator. The buttons now have different background colors, making them visually distinguishable. Additionally, the icons have different colors based on their functionality, improving the overall clarity of the interface.
Additional Rows: The updated code expands the calculator interface by adding more rows of buttons. These rows include numeric buttons (0-9) and arithmetic operation buttons like addition (+), subtraction (-), multiplication (×), and division (÷). The additional buttons allow users to perform a wider range of calculations efficiently.

By incorporating these new features and enhancements, the updated code provides users with a more comprehensive and user-friendly calculator experience.

Improved Button Refactoring Enhances Code Organization and Reusability

The code snippet provided showcases the refactoring of the calculator's button functionality into a separate class called "button." This refactoring improves code organization and promotes reusability.

The "button" class is a StatelessWidget that takes a required parameter named "bname," which represents the content of the button (either text or an icon). Inside the build method, the class returns a Padding widget containing a TextButton.

The appearance of the button is customized using the ButtonStyle property, which sets the fixedSize to a specific width and height (75.0, 70.0 in this case) and the backgroundColor to a dark color (0xff272B34). The content of the button, represented by the "bname" parameter, is passed to the child property of the TextButton.

By encapsulating the button functionality in a separate class, it allows for better code organization and reusability. This approach makes it easier to customize button properties and enables the reuse of buttons throughout the application, providing a more modular and maintainable code structure.

Refactored code is shown below 👇

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test123/button.dart';

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff22252D),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 240.0,
                color: Color(0xff22252D),
                padding: EdgeInsets.only(top: 150.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        // fontWeight: FontWeight.bold,
                        fontSize: 25.0,
                        color: Colors.white,
                      ),
                      "302 x 75",
                    ),
                    Text(
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 45.0,
                        color: Colors.white,
                      ),
                      "22650",
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xff292D36),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          button(bname:  Text(
                            "AC",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6),
                              ),
                            ),
                          ),),
                          button(bname:  Icon(
                            CupertinoIcons.minus_slash_plus,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6)),
                          ),),
                          button(bname: Text(
                            "%",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xff26E8C6),
                              ),
                            ),
                          ),),
                          button(bname: Icon(
                            CupertinoIcons.divide,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xffE78388)),
                          ),),
                        ],
                      ),
                      Row(
                        children: [
                          button(bname: Text(
                            "7",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "8",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "9",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Icon(
                            CupertinoIcons.multiply,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xffE78388)),
                          ),),
                        ],
                      ),
                      Row(
                        children: [
                          button(bname: Text(
                            "4",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "5",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "6",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Icon(
                            CupertinoIcons.minus,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xffE78388)),
                          ),),
                        ],
                      ),
                      Row(
                        children: [
                          button(bname: Text(
                            "1",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "2",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            "3",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname:  Icon(
                            CupertinoIcons.plus,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xffE78388)),
                          ),),
                        ],
                      ),
                      Row(
                        children: [
                          button(bname: Icon(
                            CupertinoIcons.restart,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white),
                          ),),
                          button(bname: Text(
                            "0",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Text(
                            ".",
                            style: TextStyle(
                              fontSize: 25.0,
                              color: MaterialStateColor.resolveWith(
                                    (states) => Colors.white,
                              ),
                            ),
                          ),),
                          button(bname: Icon(
                            CupertinoIcons.equal,
                            size: 30.0,
                            color: MaterialStateColor.resolveWith(
                                    (states) => Color(0xffE78388)),
                          ),),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

class button extends StatelessWidget {
  var bname;
  button({required this.bname});
  @override
  Widget build(BuildContext context) {
    return Padding(
          padding: EdgeInsets.only(left: 20.0, top: 10.0),
          child: TextButton(
            onPressed: () {
              print("ac");
            },
            style: ButtonStyle(
                fixedSize: MaterialStateProperty.all(
                    Size(75.0, 70.0)),
                backgroundColor: MaterialStateProperty.all(
                    Color(0xff272B34))),
            child: bname
          ),
        );
  }
}