22.11.2024

Aula 109: Criando Widgets com SwiftUI

Nesta aula, vamos explorar como criar widgets simples usando o SwiftUI. Os widgets são uma ótima maneira de apresentar informações rapidamente, sem a necessidade de abrir um aplicativo. Abordaremos o básico da criação de um widget e sua integração com um aplicativo SwiftUI existente.

O que é um Widget?

Um widget é uma pequena visualização que exibe informações do seu aplicativo na tela inicial ou na visualização Hoje. Widgets podem mostrar dados como informações meteorológicas, contagens regressivas ou lembretes. Com o SwiftUI, criar um widget é simples e permite um grande nível de personalização.

Começando

Para criar um widget em seu aplicativo SwiftUI, você precisa adicionar um novo alvo para o widget. Siga estes passos:

1. Abra seu projeto no Xcode.
2. Vá em Arquivo -> Novo -> Alvo.
3. Selecione Extensão de Widget.
4. Dê um nome ao seu widget (por exemplo, "MeuPrimeiroWidget") e clique em Concluído.

O Xcode gerará uma nova pasta contendo o código padrão para seu widget.

Criando um Widget Básico

Aqui está como criar um widget simples que exibe uma mensagem de saudação. Vamos utilizar o framework WidgetKit juntamente com o SwiftUI.

Passo 1: Defina a Estrutura do Widget

Navegue até a pasta do widget gerada e abra o arquivo MeuPrimeiroWidget.swift. Você começará com o seguinte código:

import WidgetKit
import SwiftUI

struct MeuPrimeiroWidget: Widget {
    let kind: String = "MeuPrimeiroWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: SimpleEntryProvider()) { entry in
            MeuPrimeiroWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Meu Primeiro Widget")
        .description("Este é um widget simples que mostra uma saudação.")
    }
}

Passo 2: Crie o Provedor de Linha do Tempo

O provedor de linha do tempo é responsável por fornecer dados ao widget. Você pode criar uma entrada simples usando uma struct:

struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationIntent
    let greeting: String
}

struct SimpleEntryProvider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), configuration: ConfigurationIntent(), greeting: "Olá, Widget!")
    }

    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration, greeting: "Olá, Widget!")
        completion(entry)
    }

    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> ()) {
        let entries: [SimpleEntry] = [
            SimpleEntry(date: Date(), configuration: configuration, greeting: "Olá, Widget!"),
            SimpleEntry(date: Calendar.current.date(byAdding: .minute, value: 5, to: Date())!, configuration: configuration, greeting: "Olá novamente!"),
        ]

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

Passo 3: Crie a Visualização do Widget

Agora, vamos projetar a visualização do seu widget usando SwiftUI:

struct MeuPrimeiroWidgetEntryView: View {
    var entry: SimpleEntry

    var body: some View {
        Text(entry.greeting)
            .font(.headline)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

Passo 4: Atualize o Widget

Para garantir que seu widget seja atualizado periodicamente, verifique se sua função getTimeline no SimpleEntryProvider gera entradas com datas futuras.

Passo 5: Execute Seu Widget

Para testar seu widget recém-criado, você pode executar o aplicativo e adicionar o widget na tela inicial do seu dispositivo ou simulador. Pressione e segure a tela inicial, toque no botão "+", e busque pelo seu widget pelo nome.

Conclusão

Nesta aula, você aprendeu o básico sobre como criar um widget com SwiftUI usando o framework WidgetKit. Você pode personalizar ainda mais seu widget incorporando dados dinâmicos e adicionando interações. Widgets podem aumentar significativamente a visibilidade e funcionalidade do seu aplicativo, proporcionando aos usuários acesso rápido a informações essenciais.

Com esta base, sinta-se à vontade para explorar recursos mais complexos, como opções de configuração do usuário e integração de dados ao vivo. Boa codificação!

Video

Navigation