Dando continuidade ao desenvolvimento do aplicativo APSREDE, nesta etapa focamos na implementação do MenuApp integrado ao WordPress via REST API, utilizando Provider para gerenciamento de estado. A inteligência artificial nos auxiliou na criação do modelo de dados, serviço de consumo da API, Provider e exibição do menu no Drawer. Também corrigimos problemas de cores do tema global para manter a identidade visual em todo o aplicativo. O resultado foi um menu funcional, estilizado e integrado perfeitamente com o restante do app.

Na primeira parte do projeto APSREDE, mostramos como estruturamos a base do aplicativo Flutter com Provider para gerenciamento de estado e configuração inicial do tema.
Agora, avançamos para um ponto essencial: a implementação do menu dinâmico a partir do WordPress.

O Desafio

Na versão inicial gerada pela IA, o menu não foi implementado, e as cores do tema também não apareciam corretamente.
O objetivo era:

1. Criar um menu dinâmico carregado do WordPress.
2. Utilizar Provider para gerenciar o estado do menu.
3. Corrigir as cores do tema para todo o aplicativo, não apenas no Drawer.

1. Expondo o Menu no WordPress

No WordPress 6.8 ou superior, é possível expor o menu publicamente via REST API com o filtro:

phpCopiarEditaradd_filter('rest_menu_read_access', '__return_true');

Isso permitiu acessar o menu MenuApp diretamente pela API.

2. Criando o Modelo de Menu

A IA gerou o modelo MenuItem para representar cada item do menu:

class MenuItem {
  final int id;
  final String title;
  final String url;
  final int objectId;
  final String type;

  MenuItem({
    required this.id,
    required this.title,
    required this.url,
    required this.objectId,
    required this.type,
  });

  factory MenuItem.fromJson(Map<String, dynamic> json) {
    return MenuItem(
      id: json['ID'] ?? json['id'],
      title: (json['title'] as String?) ?? '',
      url: json['url'] as String? ?? '',
      objectId: json['object_id'] ?? 0,
      type: json['object'] ?? '',
    );
  }
}

3. Serviço para Buscar o Menu

Foi criado um método no WordPressService para buscar o menu:

Future<List<MenuItem>> fetchMenuApp() async {
  final resp = await http.get(Uri.parse('$_baseUrl/menus/v1/menus/MenuApp'));
  if (resp.statusCode == 200) {
    final data = json.decode(resp.body) as List;
    return data.map((j) => MenuItem.fromJson(j)).toList();
  }
  throw Exception('Erro ao carregar menu MenuApp');
}

4. Criando o Provider do Menu

O MenuProvider gerencia o estado do menu e dispara a busca na inicialização:

class MenuProvider extends ChangeNotifier {
final WordPressService _service = WordPressService();
List<MenuItem> items = [];
bool isLoading = false;

Future<void> loadMenu() async {
isLoading = true;
notifyListeners();

try {
items = await _service.fetchMenuApp();
} catch (e) {
items = [];
}

isLoading = false;
notifyListeners();
}
}

5. Integrando o Provider no main.dart

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => PostProvider()),
    ChangeNotifierProvider(create: (_) => MenuProvider()),
  ],
  child: MaterialApp(
    title: 'APSREDE',
    theme: appTheme,
    home: const HomeScreen(),
  ),
);

6. Exibindo o Menu no Drawer

Drawer(
  child: Consumer<MenuProvider>(
    builder: (_, menuProv, __) {
      if (menuProv.isLoading) return const CircularProgressIndicator();
      return ListView(
        children: menuProv.items.map((item) {
          return ListTile(
            title: Text(item.title),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => CategoryScreen(
                    categoryId: item.objectId,
                    title: item.title,
                  ),
                ),
              );
            },
          );
        }).toList(),
      );
    },
  ),
);

7. Corrigindo as Cores do Tema

Um problema identificado foi que a cor azul aparecia apenas no Drawer. A IA corrigiu o tema global:

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF005BAF),
    primary: const Color(0xFF005BAF),
    secondary: const Color(0xFFFF783F),
  ),
  appBarTheme: const AppBarTheme(
    backgroundColor: Color(0xFF005BAF),
    foregroundColor: Colors.white,
    elevation: 0,
  ),
);

E o DrawerHeader foi atualizado para usar a cor do tema:

DrawerHeader(
  decoration: BoxDecoration(
    color: Theme.of(context).colorScheme.primary,
  ),
  child: Text(
    'MenuApp',
    style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
  ),
);

Após as implementações e correções, o menu foi carregado com sucesso logo no início da aplicação e com as cores corretas do tema global.
A inteligência artificial mostrou-se fundamental para acelerar o desenvolvimento, corrigir inconsistências e manter a qualidade do código.