Creating a GUI application with Rust

Creating a basic GUI application in Rust using the Druid crate is a great way to get started with basic desktop application development. In this tutorial, we’ll walk through the process of creating a simple window with a label and two buttons. When you click one button, it will change the label’s text, when you click the other, it resets. We’ll use straightforward language to make this as easy as possible.

As a disclaimer, I would have used GTK, since its commonly used for C/C++ applications, but it seems a little broken and/or complex for Rust, specially for Windows, so I decided to seek an alternative.

Pre-requisites

Before you begin, make sure you have Rust and Cargo installed on your system. You can install them from Rust’s official website.

Also, if you’re new to rust, read my previous tutorial explaining the basics.

As mentioned, we will be using a crate called Druid, which lets you develop simple interactive graphical applications, for most platforms(Windows, macOS, Linux, OpenBSD, FreeBSD and the Web with WebAssembly). If you wish to learn more abuit Druid, take a look at the docs here.

Step 1: Set Up Your Project

1. Create a new Rust project by opening your terminal and running the following command:

//initiate a cargo project
cargo new rust_gui_app

2. Change your working directory to the project folder:

cd rust_gui_app

3. Open the Cargo.toml file in your project directory and add the following dependencies for Druid:

[dependencies]
druid = "0.6"
druid-shell = "0.6"

4. Save the Cargo.toml file.

Step 2: Writing the Code

Now, let’s write the code for your simple GUI application.

1. Open the src/main.rs file in your project directory and replace the existing code with the following:

use druid::widget::{Label, Button};
use druid::{AppLauncher, LocalizedString, PlatformError, Widget, WindowDesc};

fn main() -> Result<(), PlatformError> {
    // Create a WindowDescription
    let main_window = WindowDesc::new(build_ui)
        .title(LocalizedString::new("Rust GUI App")) //App Title
        .window_size((300.0, 150.0)); //Window Size

    // Launch the application
    AppLauncher::with_window(main_window)
        .use_simple_logger()
        .launch("Hello, Druid!".to_string())?;//Text it will display
    Ok(())
}

fn build_ui() -> impl Widget<String> {
    // Create a label with an initial text
    let label = Label::new(|data: &String, _env: &druid::Env| data.to_string());

    // Create a button
    let button = Button::new("Click me").on_click(|_ctx, data: &mut String, _env| {
        data.push_str(" Rust!");//adds " Rust!" to the end of the text
    });
    
    // Create a button to reset the text
    let reset_text_button = Button::new("Reset Text").on_click(|_ctx, data: &mut String, _env| {
        *data = "Hello, Druid!".to_string();
    });

    // Create a vertical layout
    let layout = druid::widget::Flex::column()
        .with_child(label)
        .with_spacer(10.0)
        .with_child(button)
        .with_child(reset_text_button);

    layout
}

Step 3: Build and Run Your Application

Now that you have your code in place, it’s time to build and run your application.

1. In your terminal, navigate to your project’s root directory (if you’re not already there).
2. Build your Rust application using the following command:

cargo build

3. Once the build is complete, run your application:

cargo run

You should now see a window with a label that initially displays “Hello, Druid!”,a button that says “Click me.” and another that says “Reset Text”. When you click one, the label’s text will change to “Hello, Druid! Rust!” when you click the other, the text resets.

Congratulations! You’ve created a basic GUI application in Rust using the Druid crate. You can expand on this foundation to build more complex desktop applications. Happy coding!

Get articles on your E-mail

I accept the privacy policy