DEV Community

Kashif Soofi
Kashif Soofi

Posted on • Updated on

Counter App with GTK4 and Rust

#gtk4 #rust

GTK and Rust

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

Rust is a fast, reliable and productive language for building software on embedded devices, web services and more. It is a system programming language focused on safety, speed and concurrency.

Focus of this tutorial is to write a counter app with GTK 4 and Rust.

Project Setup

Let's begin by installing all necessary tools. First, follow the instructions on the GTK website in order to install GTK 4. Then install Rust with rustup. We are targeting GTK4, Rust 1.75 and gtk-rs version 0.7.3 with features v4_12.

Now lets create a new project by executing:

cargo new gtk4-rust-counter-app
Enter fullscreen mode Exit fullscreen mode

Add gtk4 crate to your dependencies in Cargo.toml.

cargo add gtk4 --rename gtk --features v4_12
Enter fullscreen mode Exit fullscreen mode

Now we can run our application by executing:

cargo run
Enter fullscreen mode Exit fullscreen mode

At this moment it would print Hello, world!.

Application

Lets start by creating GTK Application and connecting to activate event of the Application. We will create a method build_ui to create a window and display it.

use gtk::prelude::*;
use gtk::{glib, Application, ApplicationWindow};

const APP_ID: &str = "org.gtk_rs.GTK4Counter";

fn main() -> glib::ExitCode {
// Create a new application
    let app = Application::builder().application_id(APP_ID).build();

    // Connect to "activate" signal of `app`
    app.connect_activate(build_ui);

    // Run the application
    app.run()
}

fn build_ui(app: &Application) {
    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .application(app)
        .title("GTK Counter App")
        .build();

    // Present window
    window.present();
}
Enter fullscreen mode Exit fullscreen mode

This will dispaly an empty window. Time to add some content.

Blank Window

Label

Lets start by adding a Label and displaying Hello World! text. Add Label to gtk imports.

Add following to build_ui method.

    let label_counter = Label::builder()
        .label("Hello World!")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();
Enter fullscreen mode Exit fullscreen mode

And add label_counter as child of window.

    let window = ApplicationWindow::builder()
        .application(app)
        .title("GTK Counter App")
        .child(&label_counter)
        .build();
Enter fullscreen mode Exit fullscreen mode

Running the application now would display Hello World! text in the window.

Hello World

Increment Button

Lets create a button

    let button_increase = Button::builder()
        .label("Increase")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();
Enter fullscreen mode Exit fullscreen mode

Now that we have multiple widgets, we would add a gtk_box to hold all the child elements and add that gtk_box as child to window instead.

    let gtk_box = Box::builder()
        .orientation(Orientation::Vertical)
        .build();
    gtk_box.append(&label_counter);
    gtk_box.append(&button_increase);

    ...
        .child(&gtk_box)
    ...
Enter fullscreen mode Exit fullscreen mode

Increase Button

Add Click Handler

Lets add a counter and button click handler. We will update the counter and update the label_counter with the value. Out counter variable would need to be put inside Rc and Cell (not sure if I am using the term correctly) to enable multiple owners and mutable access to variable.

Variable declare will look like following and set label value.

    let counter = Rc::new(Cell::new(0));
    ...
    .label(&counter.get().to_string())
    ...
Enter fullscreen mode Exit fullscreen mode

Lets add a click handler for the button_increase.

    button_increase.connect_clicked(clone!(@strong counter, @weak label_counter =>
        move |_| {
            counter.set(counter.get() + 1);
            label_counter.set_label(&counter.get().to_string());
    }));
Enter fullscreen mode Exit fullscreen mode

Add Decrease Button and Handler

Lets add another button to decrease the value and update the value

    let button_decrease = Button::builder()
        .label("Decrease")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

    button_decrease.connect_clicked(clone!(@weak label_counter =>
        move |_| {
            counter.set(counter.get() - 1);
            label_counter.set_label(&counter.get().to_string());
    }));
Enter fullscreen mode Exit fullscreen mode

Source

Source code for the demo application is hosted on GitHub in blog-code-samples repository.

References

In no particular order

Top comments (0)

Read next

skie1997 profile image

How to export images from charts?

Siji Chen -

eaccords profile image

The Power of Customized Signature Styles

eAccords -

awaiszafar14 profile image

TURBO Rails

Awais Zafar -

jay111 profile image

DO YOU KNOW HOW BIG IS GPT-4?

Jay -