How to use a separate widget from another class in Flutter

Flutter聽is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms. Let鈥檚 discuss what is a widget in Flutter.

Widget

A widget is a building block of a user interface in Flutter. All the components in Flutter, such as layouts, buttons, texts, and images, are widgets. These widgets are used to create some visual and interactive components of the application. Let's move further to discuss the use of a widget from another class.

Use a separate widget from another class

In Flutter, we can use a separate widget multiple times, which is defined in another class. Let鈥檚 follow the steps below to create an example to implement using a separate widget from another class.

1. Create a Flutter project

Let鈥檚 start by creating a new Flutter project. For this, open the terminal and execute the following commands:

flutter create separatewidget
cd separatewidget

2. Create a widget in another class

Let鈥檚 create a ElevatedButton in Flutter, which will increment the value present on the screen. Create a new file in /lib folder named button.dart. We will add the following code in the button.dart file:

import 'package:flutter/material.dart';
class Button extends StatefulWidget {
  const Button({super.key, this.callback});
  final callback;
  @override
  State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          onPressed: widget.callback, child: const Text('Increment')),
    );
  }
}
Implementation of ElevatedButton

In the above code, we have created a StatefulWidgetA widget that has mutable state. and implemented an ElevatedButton widget with a Text "Increment" inside it. This takes a callbackA function which is passed as an argument to another function to perform a specific task. function as a parameter.

3. Create the homepage

Now, we will create the homepage inside the main.dart file and import the Button widget from the button.dart file using the following code:

import 'package:separatewidget/button.dart';

Let's create a new variable number and initialize it with value 0. 

int number = 0;
Initializing the variable

Now we will create a Column inside the body of Scaffold and display the number and Button there. Button will take a callback function as parameter in which we will increment the number whenever the Button is pressed. This is implemented in the code below:

Column(
    children: [
    Text(number.toString()),
    Button(
        callback: () {
        setState(() {
            number = number + 1;
        });
        },
    ),
],)
Calling Button on MyHomePage

4. Complete implementation

Here is the complete implementation of using a separate widget from another class:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
Complete implementation of application

We offer various courses if you aim to continue your journey in learning Flutter!

Free Resources

Copyright 漏2025 Educative, Inc. All rights reserved