Flutter: Prática Fase 2 — ShopApp Edição Core

Q: P: Como o redirect do GoRouter acessa o estado do Riverpod?

R: Use ProviderScope.containerOf(context).read(provider) para ler Providers dentro do redirect.

Peças dispersas montam um motor — a Fase 2 monta conhecimentos independentes em uma arquitetura de app completa.

📋 Pré-requisitos: Você precisa dominar o seguinte primeiro

Aula 1: Introdução ao Flutter & Configuração do Ambiente

Aula 2: Curso Intensivo da Linguagem Dart

Aula 3: Fundamentos de Widget

Aula 4: Sistema de Layout

Aula 5: StatefulWidget e Interação

Aula 6: Material Design e Widgets Comuns

Aula 7: Prática Fase 1 — ShopApp Starter

Aula 8: Navegação e Roteamento

Aula 9: Formulário e Entrada

Aula 10: Lista e Rolagem

Aula 11: Rede e API REST

Aula 12: Gerenciamento de Estado — Riverpod

Aula 13: Armazenamento Local

1. O Que Você Vai Aprender

Camadas de arquitetura: Presentation(Widget) → Application(Notifier) → Infrastructure(Dio+Hive)
Estado global com Riverpod: coordenação cartProvider + authProvider + productProvider
Interceptores Dio: auto-anexar Bearer Token + auto-refresh em 401
Cache offline com Hive: exibir dados de produtos em cache quando a rede falha
Fluxo completo do usuário: Navegar → Adicionar ao Carrinho → Login → Checkout → Confirmação do Pedido (liquidação em USD)

2. Uma História Real de Caos Arquitetural

(1) O Problema: Código Espaguete

O ShopApp Fase 1 do Bob foi lançado, mas o código é uma bagunça: requisições de rede espalhadas dentro dos Widgets, gerenciamento de estado metade setState metade callbacks, lógica de cache escrita nos métodos build. Adicionar uma funcionalidade exige modificar 5 arquivos, e cada release corre o risco de introduzir bugs. Um app com 100 mil DAUs não sustenta código espaguete.

(2) A Solução com Arquitetura de Três Camadas

A Clean Architecture divide o código em três camadas: Presentation (UI), Application (lógica de negócio/estado), e Infrastructure (fontes de dados), com dependências fluindo de fora para dentro.

(3) Benefício: Mantível, Testável, Extensível

Após refatorar para a arquitetura de três camadas, Bob adiciona um módulo de pagamento simplesmente adicionando um Notifier + Repository, sem tocar na camada de UI. Testes unitários podem mockar o Repository para testar Notifiers, independentemente da rede.

3. Design da Arquitetura de Três Camadas

graph TD
    subgraph Presentation
        HP2[HomePage]
        DP2[DetailPage]
        CP2[CartPage]
        CK[CheckoutPage]
    end
    subgraph Application Layer
        PN2[ProductNotifier]
        CN2[CartNotifier]
        AN[AuthNotifier]
    end
    subgraph Infrastructure
        DR2[DioRepository]
        HR[HiveCache]
        SS2[SecureStorage]
    end
    HP2 --> PN2
    DP2 --> CN2
    CP2 --> CN2
    CK --> AN
    PN2 --> DR2
    AN --> SS2
    PN2 --> HR

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

(1) Responsabilidades das Camadas

Camada	Diretório	Responsabilidade	Depende De
Presentation	`screens/`, `widgets/`	Renderização de UI + interação do usuário	Application
Application	`notifiers/`, `providers/`	Gerenciamento de estado + lógica de negócio	Infrastructure
Infrastructure	`repositories/`, `storage/`, `network/`	Busca de dados + persistência	models

(2) Estrutura do Projeto

TEXT

lib/
├── main.dart
├── app.dart                    # MaterialApp.router
├── core/
│   ├── router.dart             # GoRouter config
│   ├── network/
│   │   ├── dio_client.dart     # Dio instance + interceptors
│   │   └── api_exception.dart  # Unified error
│   └── storage/
│       ├── secure_storage.dart
│       ├── hive_cache.dart
│       └── shared_prefs.dart
├── models/
│   ├── product.dart
│   ├── cart_item.dart
│   ├── order.dart
│   └── user.dart
├── notifiers/
│   ├── auth_notifier.dart
│   ├── product_notifier.dart
│   └── cart_notifier.dart
├── repositories/
│   ├── product_repository.dart
│   ├── auth_repository.dart
│   └── order_repository.dart
└── screens/
    ├── home_page.dart
    ├── detail_page.dart
    ├── cart_page.dart
    ├── checkout_page.dart
    └── login_page.dart

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

4. Implementação da Camada de Infrastructure

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: Wrapper do cliente Dio

DART

import 'package:dio/dio.dart';

// ⚙️ Install dependency: flutter pub add dio

// Custom class definition sources:
// - SecureStorage: see Lesson 13 Flutter Secure Storage
// - AuthInterceptor: see Lesson 11 Dio Auth Interceptor

class DioClient {
  late final Dio _dio;

  DioClient({required String baseUrl, required SecureStorage storage}) {
    _dio = Dio(BaseOptions(
      baseUrl: baseUrl,
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 30),
    ));
    _dio.interceptors.addAll([
      AuthInterceptor(storage: storage, dio: _dio),
      LogInterceptor(requestBody: true, responseBody: true),
    ]);
  }

  Future<Response> get(String path, {Map<String, dynamic>? queryParams}) =>
      _dio.get(path, queryParameters: queryParams);

  Future<Response> post(String path, {dynamic data}) =>
      _dio.post(path, data: data);

  Future<Response> put(String path, {dynamic data}) =>
      _dio.put(path, data: data);

  Future<Response> delete(String path) => _dio.delete(path);
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: Product Repository

DART

import 'package:dio/dio.dart';

// ⚙️ Install dependency: flutter pub add dio

// Custom class definition sources:
// - DioClient: see Lesson 4 Dio client wrapper in this lesson
// - ProductCache: see Lesson 13 Hive Product Cache
// - Product: see Lesson 11 json_serializable model

class ProductRepository {
  final DioClient _client;
  final ProductCache _cache;

  ProductRepository(this._client, this._cache);

  Future<List<Product>> getProducts({int page = 1, String? category}) async {
    try {
      final response = await _client.get('/products', queryParams: {
        'page': page, 'limit': 20, if (category != null) 'category': category,
      });
      final products = (response.data['items'] as List)
          .map((j) => Product.fromJson(j)).toList();
      await _cache.saveProducts(products);
      return products;
    } on DioException {
      // Offline fallback
      final cached = await _cache.getProducts();
      if (cached.isNotEmpty) return cached;
      rethrow;
    }
  }

  Future<Product> getProductById(int id) async {
    final cached = await _cache.getProductById(id);
    if (cached != null) return cached;
    final response = await _client.get('/products/$id');
    return Product.fromJson(response.data);
  }
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

5. Implementação da Camada de Application

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: Auth Notifier

DART

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod riverpod_annotation
// ⚙️ Dev dependency: flutter pub add --dev riverpod_generator build_runner

// Custom class definition sources:
// - User: see Lesson 12 @riverpod Auth example
// - secureStorageProvider/authRepoProvider: see Lesson 13 storage layer

@riverpod
class Auth extends _$Auth {
  @override
  AsyncValue<User?> build() {
    // Check stored token on app start
    _checkStoredToken();
    return const AsyncData(null);
  }

  Future<void> _checkStoredToken() async {
    final storage = ref.read(secureStorageProvider);
    final token = await storage.getAccessToken();
    if (token != null) {
      state = await AsyncValue.guard(() => ref.read(authRepoProvider).validateToken(token));
    }
  }

  Future<void> login(String email, String password) async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() async {
      final result = await ref.read(authRepoProvider).login(email, password);
      await ref.read(secureStorageProvider).saveTokens(
        accessToken: result.accessToken, refreshToken: result.refreshToken, userId: result.user.id,
      );
      return result.user;
    });
  }

  Future<void> logout() async {
    await ref.read(secureStorageProvider).clearAll();
    state = const AsyncData(null);
  }
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: Cart Notifier (versão persistente)

DART

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod riverpod_annotation
// ⚙️ Dev dependency: flutter pub add --dev riverpod_generator build_runner

// Custom class definition sources:
// - CartItem: see Lesson 12 CartNotifier example
// - Product: see Lesson 11 json_serializable model
// - cartStorageProvider: see Lesson 13 Hive cart persistence

@riverpod
class Cart extends _$Cart {
  @override
  List<CartItem> build() {
    // Load from local storage on init
    _loadFromStorage();
    return [];
  }

  Future<void> _loadFromStorage() async {
    final storage = ref.read(cartStorageProvider);
    final items = await storage.loadCart();
    if (items.isNotEmpty) {
      state = items;
    }
  }

  Future<void> _persist() async {
    final storage = ref.read(cartStorageProvider);
    await storage.saveCart(state);
  }

  void addItem(Product product) {
    final idx = state.indexWhere((i) => i.product.id == product.id);
    if (idx >= 0) {
      state = [...state]..[idx] = state[idx].copyWith(quantity: state[idx].quantity + 1);
    } else {
      state = [...state, CartItem(product: product, quantity: 1)];
    }
    _persist();
  }

  void updateQuantity(int productId, int qty) {
    if (qty <= 0) { removeItem(productId); return; }
    state = [for (final i in state) i.product.id == productId ? i.copyWith(quantity: qty) : i];
    _persist();
  }

  void removeItem(int productId) {
    state = state.where((i) => i.product.id != productId).toList();
    _persist();
  }

  void clear() { state = []; _persist(); }
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

6. Implementação da Camada de Presentation

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: Guarda de autenticação do GoRouter

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod go_router

// Custom class definition sources:
// - authProvider: see Lesson 5 Auth Notifier in this lesson
// - MainScaffold: custom Shell route container Widget

final router = GoRouter(
  initialLocation: '/',
  redirect: (context, state) {
    final authState = ProviderScope.containerOf(context).read(authProvider);
    final isLoggedIn = authState.valueOrNull != null;
    final isLoginRoute = state.matchedLocation == '/login';
    if (!isLoggedIn && !isLoginRoute) return '/login';
    if (isLoggedIn && isLoginRoute) return '/';
    return null;
  },
  routes: [
    ShellRoute(
      builder: (_, __, child) => MainScaffold(child: child),
      routes: [
        GoRoute(path: '/', builder: (_, __) => const HomePage()),
        GoRoute(path: '/cart', builder: (_, __) => const CartPage()),
        GoRoute(path: '/profile', builder: (_, __) => const ProfilePage()),
      ],
    ),
    GoRoute(path: '/product/:id', builder: (_, s) => DetailPage(id: int.parse(s.pathParameters['id']!))),
    GoRoute(path: '/checkout', builder: (_, __) => const CheckoutPage()),
    GoRoute(path: '/login', builder: (_, __) => const LoginPage()),
  ],
);

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

▶ Exemplo

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

: HomePage consumindo Providers

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod go_router

// Custom class definition sources:
// - productProvider/cartItemCountProvider/cartProvider: see Lesson 12
// - ProductCard: custom product card Widget

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final productsAsync = ref.watch(productProvider);
    final cartCount = ref.watch(cartItemCountProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('ShopApp'), actions: [
        Badge(count: cartCount, child: IconButton(icon: const Icon(Icons.shopping_cart),
          onPressed: () => context.go('/cart'))),
      ]),
      body: productsAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, _) => Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text('Error: $err'), const SizedBox(height: 16),
          FilledButton(onPressed: () => ref.read(productProvider.notifier).refresh(), child: const Text('Retry')),
        ])),
        data: (products) => RefreshIndicator(
          onRefresh: () => ref.read(productProvider.notifier).refresh(),
          child: GridView.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, mainAxisSpacing: 8, crossAxisSpacing: 8, childAspectRatio: 0.7),
            itemCount: products.length,
            itemBuilder: (_, i) => ProductCard(product: products[i], onAddToCart: () {
              ref.read(cartProvider.notifier).addItem(products[i]);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('${products[i].name} added to cart'), duration: const Duration(seconds: 1)));
            }),
          ),
        ),
      ),
    );
  }
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

7. Exemplo Completo: Fluxo de Inicialização do main.dart

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod shared_preferences

// Custom class definition sources:
// - DioClient: see Lesson 4 in this lesson
// - SecureStorage: see Lesson 13
// - initHive(): see Lesson 13 Hive initialization
// - ShopApp: custom MaterialApp Widget
// - sharedPreferencesProvider/dioClientProvider: Riverpod Provider

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Initialize storage
  await initHive();
  final prefs = await SharedPreferences.getInstance();
  final dioClient = DioClient(baseUrl: 'https://api.shopapp.com/v1', storage: SecureStorage());

  runApp(ProviderScope(
    overrides: [
      sharedPreferencesProvider.overrideWithValue(prefs),
      dioClientProvider.overrideWithValue(dioClient),
    ],
    child: const ShopApp(),
  ));
}

class ShopApp extends ConsumerWidget {
  const ShopApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
      title: 'ShopApp',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue, useMaterial3: true),
      routerConfig: router,
    );
  }
}

TEXT

> Saída: Execute localmente com o Flutter SDK (Flutter 3.x / Dart 3.x). O servidor Piston não possui o Flutter instalado; use `flutter run` na sua máquina local para comparação. A UI/estado real pode variar ligeiramente entre plataformas.

❓ Perguntas Frequentes

P: A arquitetura de três camadas é over-engineering? R: Projetos pequenos podem escrever lógica diretamente nos Widgets. Quando um projeto ultrapassa 5 páginas ou tem múltiplas fontes de dados, a arquitetura de três camadas torna o código mantível.

P: Como os erros se propagam entre Repository e Notifier? R: O Repository lança ApiException, o Notifier captura com AsyncValue.guard, e a UI exibe via .when(error:).

P: Como implementar expiração de cache offline? R: Armazene um timestamp junto com os dados no Hive, verifique na leitura se está expirado (ex.: 1 hora), e busque novamente se expirado.

P: Como o redirect do GoRouter acessa o estado do Riverpod? R: Use ProviderScope.containerOf(context).read(provider) para ler Providers dentro do redirect.

P: E se a inicialização do Hive falhar? R: Envolva initHive() em try-catch; em caso de falha, limpe os dados do Hive e reinicialize: await Hive.deleteBoxFromDisk('products').

P: Como lidar com requisições concorrentes durante a renovação do token? R: Use um bloqueio com Completer: o primeiro 401 dispara a renovação, as outras requisições 401 aguardam o Completer completar antes de tentar novamente, evitando múltiplas renovações.

📖 Resumo

Arquitetura de três camadas: Presentation → Application → Infrastructure, com direção de dependência unidirecional
Riverpod Notifiers gerenciam lógica de negócio e estado; Repositories gerenciam busca de dados
Interceptores Dio tratam uniformemente anexação de Token e refresh em 401
Cache Hive habilita fallback offline, exibindo dados em cache quando a rede falha
Redirect do GoRouter implementa guardas de autenticação de rota

📝 Exercícios

Básico (⭐): Refatore o projeto da Fase 1 usando arquitetura de três camadas, extraindo requisições de rede dos Widgets para Repositories.
Intermediário (⭐⭐): Adicione Auth Notifier + SecureStorage, implementando persistência do estado de login e auto-refresh em 401.
Desafio (⭐⭐⭐): Implemente o fluxo completo do usuário: navegar produtos (cache offline) → adicionar ao carrinho (persistente) → login (refresh de token) → checkout (validação de formulário) → confirmação do pedido, com degradação elegante em cada etapa quando a rede falha.

← Aula Anterior | Próxima Aula →

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós