Criando um Aplicativo de Finanças Simples com Flutter e OpenHarmony: Configuração Inicial

Este guia detalha a construção de um aplicativo de gerenciamento financeiro multiplataforma, integrando Flutter e OpenHarmony. O foco é na inicialização do projeto e no estabelecimento de uma estrutura de navegação inferior com quatro seções pirncipais.

1. Inicialização do Projeto e Estrutura de Pastas

Execute os comandos a seguir no terminal para gerar o projeto base:

flutter create financas_app
cd financas_app

A estrutura de diretórios resultante é a seguinte:

financas_app/
├── lib/
│   └── main.dart
├── pubspec.yaml

2. Configuração das Dependências no pubspec.yaml

Adicione a dependência necessária para armazenamento local e configure o ambiente do projeto:

name: financas_app
description: Aplicativo de finanças com Flutter e OpenHarmony.
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

Após salvar, execute flutter pub get para instalar as dependências.

3. Implementação do Código Principal (main.dart)

O código abaixo define o aplicativo, incluindo o tema, a lógica de navegação e as páginas esqueleto. As variáveis e estruturas foram renomeadas para clareza e manutenção.

import 'package:flutter/material.dart';

void main() {
  runApp(const AplicativoFinancas());
}

class AplicativoFinancas extends StatelessWidget {
  const AplicativoFinancas({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Finanças Simples',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.cyan,
        useMaterial3: true,
      ),
      home: const NavegacaoPrincipal(),
    );
  }
}

class NavegacaoPrincipal extends StatefulWidget {
  const NavegacaoPrincipal({super.key});

  @override
  State<navegacaoprincipal> createState() => _NavegacaoPrincipalState();
}

class _NavegacaoPrincipalState extends State<navegacaoprincipal> {
  int _paginaAtual = 0;
  
  final List<widget> _telasDisponiveis = const [
    TelaDashboard(),
    TelaRegistro(),
    TelaRelatorios(),
    TelaUsuario(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _telasDisponiveis[_paginaAtual],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _paginaAtual,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.cyan[700],
        unselectedItemColor: Colors.grey[500],
        onTap: (indice) {
          setState(() {
            _paginaAtual = indice;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.dashboard_outlined),
            label: 'Painel',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.edit_note),
            label: 'Registrar',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.insights),
            label: 'Relatórios',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle_outlined),
            label: 'Perfil',
          ),
        ],
      ),
    );
  }
}

class TelaDashboard extends StatelessWidget {
  const TelaDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Painel Principal')),
      body: const Center(child: Text('Conteúdo do painel em desenvolvimento')),
    );
  }
}

class TelaRegistro extends StatelessWidget {
  const TelaRegistro({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Nova Transação')),
      body: const Center(child: Text('Formulário de registro em desenvolvimento')),
    );
  }
}

class TelaRelatorios extends StatelessWidget {
  const TelaRelatorios({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Relatórios')),
      body: const Center(child: Text('Visualização de dados em desenvolvimento')),
    );
  }
}

class TelaUsuario extends StatelessWidget {
  const TelaUsuario({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Minha Conta')),
      body: const Center(child: Text('Configurações do usuário em desenvolvimento')),
    );
  }
}</widget></navegacaoprincipal></navegacaoprincipal>

4. Aálise dos Componentes Chave

Gerenciamento de Estado da Navegação: A variável _paginaAtual armazena o índice da aba selecionada. A lista _telasDisponiveis mapeia cada aba para seu respectivo widget de página, garantindo uma correspondência precisa.

Renderização Dinâmica: O atributo body do Scaffold utiliza _telasDisponiveis[_paginaAtual] para exibir a página correta com base no estado atual, eliminando a necessidade de gerenciamento de rotas complexo.

Configuração da Barra de Navegação: O uso de BottomNavigationBarType.fixed impede que os ícones se reorganizem, mantendo uma interface consistente. As cores de seleção (selectedItemColor e unselectedItemColor) melhoram a feedback visual do usuário.

Evento de Toque: O callback onTap atualiza _paginaAtual dentro de um setState, acionando uma reconstrução do widget para refletir a nova aba ativa.

5. Resultado Esperado da Execução

Ao executar o aplicativo, ele inicia na aba "Painel". As quatro abas na parte inferior são clicáveis e alternam entre as telas correspondentes. A aparência segue o Material Design 3, adaptável para múltiplas plataformas, incluindo OpenHarmony.

6. Etapas Concluídas

• Criação do projeto base financas_app.
• Configruação da dependência shared_preferences para armazenamento local futuro.
• Implementação da estrutura de navegação inferior com quatro seções.
• Desenvolvimento dos esqueletos das páginas, prontos para expansão.