Introdução ao Flutter

Flutter é um framework de UI desenvolvido pela Google para criar aplicações nativas compiladas para mobile, web, desktop e embedded devices a partir de um único código base.

Características principais

• Widget-based: Tudo em Flutter é um widget
• Hot Reload: Alterações no código são refletidas instantaneamente
• Performance: Compilação nativa para alta performance
• Multiplataforma: Um código para Android, iOS, Web, Windows, macOS e Linux
• Material Design e Cupertino: Suporte nativo aos designs da Google e Apple

Arquitetura

Flutter usa uma arquitetura em camadas:

• Framework: Widgets, rendering, gestos, etc.
• Engine: Renderização, compilação, etc.
• Embedder: Interface com o sistema operacional

Exercícios

1. Configuração do ambiente: Instale o Flutter SDK no seu computador. Verifique a instalação executando flutter doctor no terminal. Crie um novo projeto Flutter usando flutter create meu_app.

2. Primeira aplicação: Crie um aplicativo Flutter básico que exiba "Olá, Flutter!" no centro da tela. Use um Scaffold com AppBar e body contendo um Center e Text.

3. Hot Reload: Modifique o texto do exercício anterior para "Olá, Mundo!". Use o Hot Reload (salve o arquivo) para ver as mudanças instantaneamente.

Soluções

Ver solução do exercício 1

# Verificar instalação do Flutter
flutter doctor

# Criar novo projeto
flutter create meu_app

# Navegar para o projeto
cd meu_app

# Executar o projeto
flutter run

Ver solução do exercício 2

import 'package:flutter/material.dart';

void main() {
  runApp(MinhaApp());
}

class MinhaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Minha App'),
        ),
        body: Center(
          child: Text('Olá, Flutter!'),
        ),
      ),
    );
  }
}

Ver solução do exercício 3

import 'package:flutter/material.dart';

void main() {
  runApp(MinhaApp());
}

class MinhaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Minha App'),
        ),
        body: Center(
          child: Text('Olá, Mundo!'),
        ),
      ),
    );
  }
}

Salve o arquivo e observe o Hot Reload atualizando a tela automaticamente.