Widgets de UI Básicos

Text e TextStyle

Exibe texto na tela:

Text('Texto simples')

Text(
  'Texto estilizado',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.2,
  ),
)

Text(
  'Texto com múltiplos estilos',
  style: TextStyle(
    fontSize: 16,
    color: Colors.grey[600],
  ),
)

Image

Exibe imagens:

// Da internet
Image.network('https://exemplo.com/imagem.jpg')

// Do projeto (assets)
Image.asset('assets/imagem.png')

// Com tamanho específico
Image.network(
  'https://exemplo.com/imagem.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Icon

Exibe ícones:

Icon(Icons.star, color: Colors.amber, size: 32)

Icon(Icons.favorite, color: Colors.red, size: 24)

Buttons

Flutter oferece vários tipos de botões:

ElevatedButton

Botão elevado (Material Design):

ElevatedButton(
  onPressed: () {
    print('Botão pressionado');
  },
  child: Text('Elevated Button'),
)

TextButton

Botão de texto simples:

TextButton(
  onPressed: () {
    print('Botão pressionado');
  },
  child: Text('Text Button'),
)

FilledButton

Botão preenchido:

FilledButton(
  onPressed: () {
    print('Botão pressionado');
  },
  child: Text('Filled Button'),
)

OutlinedButton

Botão com borda:

OutlinedButton(
  onPressed: () {
    print('Botão pressionado');
  },
  child: Text('Outlined Button'),
)

IconButton

Botão apenas com ícone:

IconButton(
  onPressed: () {
    print('Ícone pressionado');
  },
  icon: Icon(Icons.favorite),
)

Card

Cria um card Material Design:

Card(
  elevation: 4, // cria uma sombra no card, quanto maior a "elevação", mais sombra
  margin: EdgeInsets.all(16),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        Text('Título do Card'),
        SizedBox(height: 8),
        Text('Conteúdo do card aqui'),
      ],
    ),
  ),
)

AppBar

Barra superior da aplicação:

AppBar(
  title: Text('Título'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

Exercícios

1. Text e TextStyle: Crie um aplicativo que exiba três textos com estilos diferentes: um grande e em negrito, um médio e em itálico, e um pequeno com cor personalizada.

2. Image: Crie um aplicativo que exiba uma imagem da internet usando Image.network. Adicione um placeholder para quando a imagem estiver carregando.

3. Icon: Crie um layout com uma linha de ícones diferentes (estrela, coração, casa, configurações). Use cores diferentes para cada ícone.

4. Buttons: Crie um aplicativo com quatro tipos diferentes de botões: ElevatedButton, TextButton, OutlinedButton e IconButton. Cada botão deve executar uma ação diferente quando pressionado.

Soluções

Ver solução do exercício 1

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Text Styles')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Texto Grande e Negrito',
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Texto Médio e Itálico',
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.italic,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Texto Pequeno Colorido',
              style: TextStyle(
                fontSize: 14,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

Ver solução do exercício 2

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Image')),
      body: Center(
        child: Image.network(
          'https://picsum.photos/200/300',
          loadingBuilder: (context, child, loadingProgress) {
            if (loadingProgress == null) return child;
            return CircularProgressIndicator();
          },
          errorBuilder: (context, error, stackTrace) {
            return Text('Erro ao carregar imagem');
          },
        ),
      ),
    ),
  ));
}

Ver solução do exercício 3

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Icons')),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.star, color: Colors.amber, size: 40),
            Icon(Icons.favorite, color: Colors.red, size: 40),
            Icon(Icons.home, color: Colors.blue, size: 40),
            Icon(Icons.settings, color: Colors.grey, size: 40),
          ],
        ),
      ),
    ),
  ));
}

Ver solução do exercício 4

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Buttons')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => print('ElevatedButton pressionado'),
              child: Text('ElevatedButton'),
            ),
            SizedBox(height: 10),
            TextButton(
              onPressed: () => print('TextButton pressionado'),
              child: Text('TextButton'),
            ),
            SizedBox(height: 10),
            OutlinedButton(
              onPressed: () => print('OutlinedButton pressionado'),
              child: Text('OutlinedButton'),
            ),
            SizedBox(height: 10),
            IconButton(
              onPressed: () => print('IconButton pressionado'),
              icon: Icon(Icons.favorite),
            ),
          ],
        ),
      ),
    ),
  ));
}