Criando interfaces gráficas no C com GTK \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 16 Horas 58 Min 59 Seg Tempo restante da oferta: 16 58 59 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando interfaces gráficas no C com GTK [ C ](https://www.treinaweb.com.br/blog/categoria/c) # Criando interfaces gráficas no C com GTK Aplicações Desktop ainda são muito utilizadas. Neste artigo aprenda como utilizar o GTK para criar interfaces gráficas no C. [ Wladimilson M. Nascimento ](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-interfaces-graficas-no-c-com-gtk.png) Com raras exceções, toda nova aplicação visará uma versão web e/ou mobile. Aplicativos Desktop foram relegados a segundo plano. Entretanto, mesmo não sendo voltada para estas áreas, ao se analisar o [TIOBE index](https://www.tiobe.com/tiobe-index/), veremos que C se encontra entre as linguagens mais propulares. Isso na publicação deste artigo, mas ela se mantém entre as [linguagens mais populares](https://www.treinaweb.com.br/blog/top-5-das-linguagens-de-programacao-mais-populares-de-2017/) há muitos anos. Indicando que ainda há um grande mercado além da dualidade web-mobile. Uma das áreas onde o C é muito utilizado são em sistemas Unix, principalmente na criação de aplicações Desktops. Neste sistema, existem várias bibliotecas para a criação de interfaces gráficas, por ser multiplataforma, veremos como criar uma utilizando o GTK. ## O que é o GTK? [GTK](https://www.gtk.org/) é um toolkit open-source e multiplataforma para a criação de interfaces gráficas (GUI). Foi criado inicialmente para o [GIMP](https://www.gimp.org/), por isso era chamado de GIMP toolkit, com abreviação GTK+. Posteriormente, foi adotado pela [GNOME Foundation](https://www.gnome.org/foundation/) e com o tempo passou a ser conhecido apenas como GTK. Hoje o GTK é um dos tookits mais utilizados para a criação de aplicações gráficas para o Unix, principalmente em distribuições que fazem uso do gerenciador de Desktop [GNOME](https://www.gnome.org/). Mas por ser multiplataforma não fica limitado a este sistema. O já citado GIMP é desenvolvido com GTK e está disponível para todos os sistemas operacionais. [ ![C Intermediário](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/c.svg) Curso C Intermediário Conhecer o curso ](https://www.treinaweb.com.br/curso/c-intermediario) ## Widgets do GTK Antes de vermos um exemplo de uma aplicação com interface gráfica, é importante compreender o que é um widget. Este termo não é exclusivo do GTK, ele é utilizado para designar um componente em uma interface gráfica. Seja um componente visível, como um botão, campo, texto, etc.; até um componente “invisível”, que auxilia na estruturação do layout, como alinhamento. ## Instalando o GTK Aqui abordarei em detalhes apenas o processo de instalação do GTK no Windows 10, pois neste sistema o processo é mais complexo. Caso esteja utilizando uma distribuição Linux, para instalá-lo basta adicionar o pacote gtk3, junto com as suas dependências. No MacOS, basta executar o [script de instalação](https://gitlab.gnome.org/GNOME/gtk-osx/-/blob/master/gtk-osx-setup.sh), ele irá se encarregar de analisar o sistema e baixar as bibliotecas necessárias. No caso do Windows, antes de instalar o GTK, é necessário instalar o [MSYS2](https://www.msys2.org/). O MSYS2 é uma coleção de ferramentas de desenvolvimento para sistemas Windows e nesta coleção há o gerenciador de pacotes [Pacman](https://archlinux.org/pacman/), que nos permitirá instalar o GTK. Então vamos colocar a mão na massa. ### Instalando o MSYS2 O MSYS2 pode ser obtido no seu [repositório](https://repo.msys2.org/distrib/x86_64/). Sempre opte pelo último executável criado, eles são nomeados no padrão “msys2-x86\_64-\[yyyymmdd\].exe”. Assim, no momento a última versão disponível, a que utilizarei, é **msys2-x86\_64-20210228.exe**. Após o download do arquivo, o execute. Basta seguir o processo de instalação, mas procure não instalá-lo dentro dos arquivos de programa. Você pode instalá-lo na raiz do disco: ![Tela de instalação do MSYS2, mostrando o local de instalação](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/msys2_install_local_instalacao.png) Ao final da instalação marque a opção “**Run MSYS2 64bit now**”: ![Tela final da instalação do MSYS2](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/msys2_install_tela_final.png) Com isso, será aberto o terminal do MSYS2: ![Terminal do MSYS2](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/msys2_prompt.png) Caso não tenha marcado esta opção, você pode abri-lo no menu iniciar do sistema: ![Menu iniciar do Windows mostrando o MSYS2 selecionado](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/msys2_prompt_menu.png) ### Instalando o GTK com o Pacman Com o MSYS2 instalado, podemos utilizar o Pacman, inicialmente é necessário atualizar seus pacotes. Para isso, execute no terminal o comando abaixo: ```shell pacman -Syu ``` Caso algo esteja desatualizado, ele irá perguntar se a nova versão do pacote poderá ser instalada: Com os pacotes atualizados, podemos iniciar a instalação das ferramentas que o GTK necessitará. Isso será feito com o comando abaixo: ```shell pacman -S mingw-w64-x86_64-toolchain ``` Este comando irá listar uma série de ferramentas, onde devem ser selecionadas as abaixo: - mingw-w64-x86\_64-binutils; - mingw-w64-x86\_64-crt-git; - mingw-w64-x86\_64-gcc; - mingw-w64-x86\_64-gcc-libs; - mingw-w64-x86\_64-headers-git; - mingw-w64-x86\_64-libmangle-git; - mingw-w64-x86\_64-libwinpthread-git; - mingw-w64-x86\_64-make; - mingw-w64-x86\_64-pkgconfig (ou mingw-w64-x86\_64-pkg-config); - mingw-w64-x86\_64-tools-git; - mingw-w64-x86\_64-winpthread-git; - mingw-w64-x86\_64-winstorecompat-git. Essas ferramentas estarão numeradas: Mas estes números podem ser diferentes no seu ambiente, então é necessário prestar atenção se as ferramentas corretas estão sendo selecionadas. Em seguida, execute o comando: ```shell pacman -S base-devel ``` Que também irá listar uma série de ferramentas e neste caso devem ser selecionadas apenas duas: - make; - pkgconfig (ou pkg-config). Essas ferramentas também estarão numeradas: Com a instalação das ferramentas, o GTK poderá ser instalado com o comando abaixo: ```shell pacman -S mingw-w64-x86_64-gtk3 ``` Também é recomendado a instalação do Glade: ```shell pacman -S mingw-w64-x86_64-glade ``` Para verificar se tudo deu certo, feche o terminal padrão do MSYS e abra a versão de 64bits: ![Menu iniciar do Windows mostrando o MSYS2 64bits selecionado](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/msys2_prompt_menu_64bits.png) E nela, execute o comando abaixo: ```shell pkg-config --cflags gtk+-3.0 ``` Caso não seja apresentado nenhum erro: Significa que o ambiente está configurando corretamente. [ ![C Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/c.svg) Curso C Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/c-avancado) ## Hello World Com o ambiente configurado, vamos criar o famoso “Hello World” com o GTK: ```cpp #include static void print_hello (GtkWidget *widget, gpointer data) { g_print ("Hello World\n"); } static void activate (GtkApplication *app, gpointer user_data) { GtkWidget *window; GtkWidget *button; GtkWidget *button_box; window = gtk_application_window_new (app); gtk_window_set_title (GTK_WINDOW (window), "Olá Mundo"); gtk_window_set_default_size (GTK_WINDOW (window), 200, 200); button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL); gtk_container_add (GTK_CONTAINER (window), button_box); button = gtk_button_new_with_label ("Hello World"); g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL); g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window); gtk_container_add (GTK_CONTAINER (button_box), button); gtk_widget_show_all (window); } int main (int argc, char **argv) { GtkApplication *app; int status; app = gtk_application_new ("treinaweb.helloworld", G_APPLICATION_FLAGS_NONE); g_signal_connect (app, "activate", G_CALLBACK (activate), NULL); status = g_application_run (G_APPLICATION (app), argc, argv); g_object_unref (app); return status; } ``` Este código é bem simples, contendo apenas uma tela com um botão. Inicialmente o GTK é importado: ```cpp #include ``` No código são definidos três funções, sendo que na `main`, uma aplicação do GTK é definida: ```cpp GtkApplication *app; //... app = gtk_application_new ("treinaweb.helloworld", G_APPLICATION_FLAGS_NONE); ``` É importante que o nome da aplicação seja definido em letras minúsculas, tenha ao menos duas palavras, separadas por ponto. Caso contrário, será apresentado um erro quando for executada. Quando esta aplicação é ativada: ```cpp g_signal_connect (app, "activate", G_CALLBACK (activate), NULL); ``` É chamada a função `activate`: ```cpp static void activate (GtkApplication *app, gpointer user_data) { GtkWidget *window; GtkWidget *button; GtkWidget *button_box; window = gtk_application_window_new (app); gtk_window_set_title (GTK_WINDOW (window), "Olá Mundo"); gtk_window_set_default_size (GTK_WINDOW (window), 200, 200); button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL); gtk_container_add (GTK_CONTAINER (window), button_box); button = gtk_button_new_with_label ("Hello World"); g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL); g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window); gtk_container_add (GTK_CONTAINER (button_box), button); gtk_widget_show_all (window); } ``` Onde são definidos três widgets: ```cpp GtkWidget *window; GtkWidget *button; GtkWidget *button_box; ``` A tela, que contém o título “Olá Mundo” e o tamanho 200x200: ```cpp window = gtk_application_window_new (app); gtk_window_set_title (GTK_WINDOW (window), "Olá Mundo"); gtk_window_set_default_size (GTK_WINDOW (window), 200, 200); ``` Em seguida, é definido um container: ```cpp button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL); gtk_container_add (GTK_CONTAINER (window), button_box); ``` Onde o botão é adicionado: ```cpp button = gtk_button_new_with_label ("Hello World"); g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL); g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window); gtk_container_add (GTK_CONTAINER (button_box), button); ``` Ao ser pressionado, o botão chamará a função `print_hello`: ```cpp static void print_hello (GtkWidget *widget, gpointer data) { g_print ("Hello World\n"); } ``` Que exibirá “Hello World” no output da aplicação. Para executar este código, será utilizado o comando abaixo no terminal de 64bits do MSYS: ```shell gcc helloworld.c -o helloworld `pkg-config --cflags gtk+-3.0` `pkg-config --libs gtk+-3.0` ``` Este comando irá criar um executável chamado **helloworld**, deve ser invocado pelo terminal: ```cpp ./helloworld.exe ``` E com isso, a aplicação será exibida: ![Janela do GTK mostrando um botão](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/hello_world_gtk.png) Por hoje é só. No próximo artigo mostrarei como configurar o MSYS em uma IDE. - [ #C ](https://www.treinaweb.com.br/blog/tag/c) - [ #GTK ](https://www.treinaweb.com.br/blog/tag/gtk) - [ #Pacman ](https://www.treinaweb.com.br/blog/tag/pacman) Autor ![Wladimilson M. Nascimento](//secure.gravatar.com/avatar/f0dd442f156a3eacd2880e9cd0eafbd1?d=mm) ## Wladimilson M. Nascimento Instrutor, nerd, cinéfilo e desenvolvedor nas horas vagas. Graduado em Ciências da Computação pela Universidade Metodista de São Paulo. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-uma-aplicacao-c-com-gtk-no-codeblocks-400x280.png) [ C ](https://www.treinaweb.com.br/blog/categoria/c) 6 anos atrás ## [ Criando uma aplicação C com GTK no Code::Blocks ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-c-com-gtk-no-codeblocks) Veja como configurar o GTK no Code::Blocks e passe a utilizar esta IDE para criar seus projetos em C com interfaces gráficas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/03143715/CARTER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Criando uma API RESTful com o Carter e .NET Core ](https://www.treinaweb.com.br/blog/criando-uma-api-restful-com-o-carter-e-net-core) O Carter é um framework para .NET Core, que permite criar API RESTful de forma rápida, simples e elegante. O conheça neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/10094842/service-stack-1-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando um Web Service com o ServiceStack – Parte 2 ](https://www.treinaweb.com.br/blog/criando-um-web-service-com-o-servicestack-parte-2) Dando continuidade ao estudo da biblioteca ServiceStack, neste artigo modificaremos o web service criado na primeira parte. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/03181535/WINDOWS-PHP-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Criando um ambiente de desenvolvimento PHP com WSL ](https://www.treinaweb.com.br/blog/criando-um-ambiente-de-desenvolvimento-php-com-wsl) Nesse artigo vamos criar um ambiente de desenvolvimento PHP completo, com MySQL e Nginx dentro do WSL. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/asp-net-conhecendo-as-minimal-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ ASP.NET - Conhecendo a Minimal API ](https://www.treinaweb.com.br/blog/asp-net-conhecendo-as-minimal-api) Neste artigo vamos conhecer um dos recursos que foram adicionados no .NET 6/ASP.NET 6, que é um novo template de aplicações Web, a Minimal API. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/14131229/HEALTH-CHECKS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Verificando a integridade da aplicação ASP.NET Core com Health Checks ](https://www.treinaweb.com.br/blog/verificando-a-integridade-da-aplicacao-asp-net-core-com-health-checks) Verificar e monitorar a integridade de uma aplicação web é algo essencial, principalmente em ambientes distribuídos. O ASP.NET Core facilita esta tarefa através de Health Checks, como você verá neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/O-QUE-E-PHP-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 5 anos atrás ## [ Guia da linguagem PHP ](https://www.treinaweb.com.br/blog/guia-da-linguagem-php) Nesse guia de PHP você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação PHP. Acesse agora mesmo! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/12150130/MATERIAL-DESIGN-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Material Design? ](https://www.treinaweb.com.br/blog/o-que-e-material-design) Se você deseja criar rapidamente aplicações bonitas e utilizáveis, dê uma conferida no Material Design. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/como-construir-um-layout-flutter-responsivo) Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/15100234/primeira-app-flask-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Criando primeira app com Flask ](https://www.treinaweb.com.br/blog/criando-primeira-app-com-flask) Veja neste artigo como criar a primeira app com Flask, principal microframework do ecossistema Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Criando o primeiro projeto Django ](https://www.treinaweb.com.br/blog/criando-o-primeiro-projeto-django) Com o ambiente de desenvolvimento devidamente configurado, veremos neste artigo como criar nosso primeiro projeto com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/guia-da-linguagem-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Guia da linguagem Python ](https://www.treinaweb.com.br/blog/guia-da-linguagem-python) Entenda os principais conceitos para iniciar seus estudos neste guia da linguagem Python. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **16h 58min 59s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58