How to Print the Multiplication Table in Flutter?

In this tutorial, we’ll build a multiplication table in Flutter app where users can enter a number and see its multiplication table.

This app will be a fantastic exercise for beginners to understand state management, text input handling, and dynamic list generation in Flutter.

Steps to Print Multiplication Table in Flutter

Step 1: Setting up multiplication table in flutter

First, create a new Flutter project. Open your terminal and run the following command:

flutter create multiplication_table_app

Navigate into your project directory:

cd multiplication_table_app

Step 2: Main Application – multiplication table in flutter

Open your project in your preferred code editor and navigate to lib/main.dart. Replace the existing code with the following:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiplication Table',
      home: MultiplicationTableScreen(),
    );
  }
}

In the above code, we define the MyApp widget which is the root of our application. It sets up the MaterialApp with a title and the home screen.

Step 3: Creating the Multiplication Table Screen

Next, we need to create a stateful widget to manage the multiplication table screen. This widget will handle the user input and generate the multiplication table dynamically.

class MultiplicationTableScreen extends StatefulWidget {
  @override
  _MultiplicationTableScreenState createState() => _MultiplicationTableScreenState();
}

class _MultiplicationTableScreenState extends State<MultiplicationTableScreen> {
  final _controller = TextEditingController();
  int _number = 0;
  List<String> _table = [];

  void _generateTable() {
    setState(() {
      try {
        _number = int.parse(_controller.text);
        _table = []; // Clear previous table
        for (int i = 1; i <= 10; i++) {
          _table.add("$_number x $i = ${_number * i}");
        }
      } catch (e) {
        _table = ["Invalid Input"];
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiplication Table'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'Enter a number',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _generateTable,
              child: Text('Generate Table'),
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: _table.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_table[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Understanding the Code

1. Stateful Widget: MultiplicationTableScreen is a stateful widget because it maintains state (the number and the generated multiplication table).
2. TextField and Controller: The TextField widget is used to take user input. We use a TextEditingController to retrieve the text entered by the user.
3. Generate Table Function: The _generateTable function parses the input number and generates the multiplication table. It updates the state using setState, which re-renders the UI with the new data.
4. ListView.builder: This widget dynamically creates a scrollable list of items. It uses the _table list to generate each item in the list.

Step 5: Running the App

To see your app in action, run the following command in your terminal:

flutter run

Enter a number in the text field, click “Generate Table”, and see the multiplication table below.

Output:

Also Read:

• Create a Flutter app to check a leap year
• Check if Linked list is Palindrome in Flutter

Conclusion

Congratulations! You’ve just built a simple yet powerful multiplication table app using Flutter. This project demonstrates basic concepts such as state management, user input handling, and dynamic UI updates. Keep experimenting with Flutter to build more complex and feature-rich applications.