Design Baseado em Widgets

"Miniaplicativos. Pequenos blocos de UI altamente funcionais, projetados para serem reorganizados."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Proporções Estritas: Widgets geralmente seguem tamanhos estritos (quadrado 1x1, retângulo 2x1, quadrado grande 2x2).
2. Visibilidade Rápida: Widgets mostram a informação mais importante instantaneamente. Interações profundas geralmente exigem a abertura do aplicativo completo.
3. Correspondência do Raio do Canto: O raio da borda do conteúdo interno deve se encaixar perfeitamente no raio da borda externa do widget.

DNA Visual

• Cores: Widgets frequentemente usam fundos de cores sólidas brilhantes ou fotos em tela cheia para se diferenciarem.
• Tipografia: Números grandes e em negrito (como um relógio ou temperatura do tempo) combinados com rótulos secundários minúsculos.
• Layout: Semelhante ao Bento UI, mas focado especificamente em miniaplicativos funcionais em vez de apenas layout de conteúdo.

Implementação Web

• Exemplo de CSS:

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 160px; /* Force squares */
  gap: 16px;
  padding: 32px;
}

.widget {
  background-color: #ffffff;
  border-radius: 24px; /* Classic iOS widget radius */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

/* Specific Sizes */
.widget-small { grid-column: span 1; grid-row: span 1; }
.widget-medium { grid-column: span 2; grid-row: span 1; }
.widget-large { grid-column: span 2; grid-row: span 2; }

/* Weather Widget Example */
.widget.weather {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}
.weather-temp { font-size: 3rem; font-weight: 300; }
.weather-icon { position: absolute; top: 16px; right: 16px; font-size: 2rem; }

Implementação de Aplicativo

SwiftUI

struct WidgetDesignView: View {
    let columns = [GridItem(.flexible(), spacing: 16), GridItem(.flexible(), spacing: 16)]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                // 2x1 Widget
                WeatherWidget()
                    .frame(height: 160) // Base unit height
                
                // 1x1 Widget
                FitnessWidget()
                    .frame(height: 160)
                
                // 1x1 Widget
                MusicWidget()
                    .frame(height: 160)
            }
            .padding(24)
        }
        .background(Color(white: 0.95))
    }
}

struct WeatherWidget: View {
    var body: some View {
        ZStack(alignment: .topTrailing) {
            LinearGradient(colors: [Color(hex: "4facfe"), Color(hex: "00f2fe")], startPoint: .topLeading, endPoint: .bottomTrailing)
            
            Image(systemName: "cloud.sun.fill")
                .foregroundColor(.white)
                .font(.system(size: 40))
                .padding()
            
            VStack(alignment: .leading) {
                Spacer()
                Text("72°")
                    .font(.system(size: 48, weight: .thin))
                    .foregroundColor(.white)
                Text("San Francisco")
                    .font(.subheadline)
                    .foregroundColor(.white.opacity(0.8))
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
        }
        .cornerRadius(24) // Classic iOS widget radius
        .shadow(color: .black.opacity(0.1), radius: 10, y: 5)
    }
}

• SwiftUI é perfeito para isso. O LazyVGrid cuida do layout, e cornerRadius(24) combina perfeitamente com a estilização padrão de widgets da Apple.
• Use ZStack como a raiz do widget para sobrepor facilmente conteúdo sobre gradientes ou imagens complexas.

Flutter

class WidgetDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F2F2),
      body: GridView.count(
        crossAxisCount: 2, // 2 colunas para um telefone típico
        padding: const EdgeInsets.all(24),
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 1.0, // Quadrados 1x1
        children: [
          // Nota: Flutter GridView não se estende facilmente por linhas/colunas nativamente.

…