Criando Dashboard de Finanças pessoais com Xamarin.Forms

Fala galera. Hoje vou falar um pouco de como o processo que utilizei para a criação da minha contribuição para o Snppts. Quem me conhece sabe que não sou um mestre das UI, porém tenho me esforçado para melhorar. Então eu aproveitei a oportunidade de contribuir, para me desafiar a idealizar e construir uma UI “legal”.

A primeira coisa que fiz foi decidir sobre qual seria o objetivo do app. E ai foi que lembrei que por várias vezes tive a vontade de criar um app de finanças pessoais meu, feito do jeito que eu acho que se adeque a mim. Então surgiu a ideia de fazer o app MyDimDim.

Com a ideia do app definida, a próxima ação foi definir qual parte dele eu iria desenvolver para gerar a minha contribuição. Assim depois de olhar alguns exemplos de apps de finanças pessoais e também de pensar no que eu gostaria de ter em um app, decidi que iria fazer a UI de dashboard.

Beleza defini a ideia do app e defini qual UI eu iria fazer, e agora? Bom eu tinha que fazer o “projeto” da tela do jeito que eu queria que ela fosse não é? Então foi o que eu tentei fazer. Peguei papel e caneta e bora “desenhar”. Depois de um tempinho pensando e rabiscando, saiu essa maravilha abaixo.

Nesta image está sendo exibida uma folha de papel com o desenho do projeto da tela do app.
Incrível projeto da tela do app.

Meu protótipo ficou lindão, só que não, kkk. Bom agora que eu tinha o “protótipo” era só fazer né. Então fui lá abri o Visual Studio, criar o projeto do app, adicionei o Prism, criei as 3 abas e ai veio a pergunta. Por onde eu começo a fazer a tela? A primeira resposta que veio a cabeça foi, pelo primeiro card o de saldo. Mas ai eu lembrei que eu não tinha escolhido a cor do app. Bom parei, pensei um pouco e escolhi a cor que no caso foi um verde, assim configurei as cores no resource do arquivo App.xaml do projeto.

<prism:PrismApplication
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prism="clr-namespace:Prism.DryIoc;assembly=Prism.DryIoc.Forms"
mc:Ignorable="d"
x:Class="MyDimDim.App">
<Application.Resources>
<Color x:Key="ColorPrimary">#214f22</Color>
<Color x:Key="ColorPrimaryDark">#163617</Color>
<Color x:Key="ColorAccent">#214f22</Color>
<Color x:Key="ColorRevenue">#18780a</Color>
<Color x:Key="ColorExpense">#c41212</Color>
<Color x:Key="ColorTransfer">#146ae3</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource ColorPrimary}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
</Application.Resources>
</prism:PrismApplication>
view raw App.xaml hosted with ❤ by GitHub

Agora sim, com o “estilo” do app definido realmente comecei a criar a tela. E aí foi o card de saldo. Para deixar ele um pouco mais bonito eu utilizei o pacote nuget XF.Material Library. Comecei organizando o layout com um Grid e fui adicionando os demais controles e testando, foi ai que o Hot Reload fez a diferença, pois ficou muito mais fácil de verificar se as alterações no layout estão ficando da forma que queremos.

<material:MaterialCard
CornerRadius="20"
Elevation="2"
HorizontalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<Label
Grid.Row="0"
FontSize="Small"
HorizontalTextAlignment="Center"
Text="Saldo" />
<Label
Grid.Row="1"
FontSize="Title"
FontAttributes="Bold"
TextColor="{StaticResource ColorRevenue}"
HorizontalTextAlignment="Center"
Text="{Binding Balance, StringFormat='{0:R$ ###,###,##0.00}'}" />
</StackLayout>
<Grid
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<StackLayout
Grid.Column="0"
Grid.Row="0"
Orientation="Horizontal">
<Image
Source="arrow_down"/>
<StackLayout>
<Label
FontSize="Micro"
TextColor="Gray"
Text="Receitas"/>
<Label
FontSize="Large"
TextColor="{StaticResource ColorRevenue}"
Text="{Binding Revenues, StringFormat='{0:R$ ###,###,##0.00}'}" />
</StackLayout>
</StackLayout>
<StackLayout
Grid.Column="1"
Grid.Row="0"
Orientation="Horizontal">
<Image
Source="arrow_up"/>
<StackLayout>
<Label
FontSize="Micro"
TextColor="Gray"
Text="Despesas"/>
<Label
FontSize="Large"
TextColor="{StaticResource ColorExpense}"
Text="{Binding Expenses, StringFormat='{0:R$ ###,###,##0.00}'}" />
</StackLayout>
</StackLayout>
</Grid>
</Grid>
</material:MaterialCard>
view raw CardSaldo.xaml hosted with ❤ by GitHub

Outra coisa que fiz foi criar as propriedades na DashboardViewController para fazer o binding nos controles da DashboardView.

Com o primeiro card pronto, a próxima ação era criar o gráfico de despesas. Para gerar o gráfico eu usei o nuget do Microcharts. Essa parte até que foi simples, pois o Chart é configurado na ViewModel.

O próximo item foi a lista das movimentações para os próximos 7 dias. Para este caso eu optei por utilizar uma CollectionView com a orientação dos itens na horizontal. Mas Ricardo porque você não utilizou o CarouselView? Bom por que eu testei com o CollectionView e que a meu ver gerou um resultado satisfatório.

<Label
Text="Movimentações dos Próximos 7 Dias"
TextColor="Gray"
/>
<CollectionView
ItemsSource="{Binding Movimentations}"
ItemsLayout="HorizontalList"
HeightRequest="100">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Padding="10">
<material:MaterialCard
CornerRadius="10"
WidthRequest="130"
Elevation="2"
Padding="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Source="{Binding Type, Converter={converters:IconMovimentationTypeConverter}}"/>
<Label
Grid.Row="0"
Grid.Column="1"
FontSize="Medium"
VerticalTextAlignment="Center"
TextColor="{Binding Type, Converter={converters:ColorMovimentationTypeConverter}}"
Text="{Binding Value, StringFormat='{0:R$ ###,###,##0.00}'}"/>
<Label
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="{Binding Name}"
FontSize="Small"/>
</Grid>
</material:MaterialCard>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
view raw Movimentations.xaml hosted with ❤ by GitHub

E por último mas não menos importante, eu fiz a implementação da listagem dos cartões de crédito. Para isto eu utilizei a mesma ideia das próximas movimentações.

<Label
Text="Cartões de Crédito"
TextColor="Gray"
/>
<CollectionView
ItemsSource="{Binding CreditCards}"
ItemsLayout="HorizontalList"
HeightRequest="190">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Padding="5">
<material:MaterialCard
CornerRadius="10"
WidthRequest="240"
Elevation="2"
Padding="10"
BackgroundColor="{Binding CardColor}">
<StackLayout>
<Label
Grid.Row="0"
FontAttributes="Bold"
TextColor="{Binding TextColor}"
Text="{Binding Name}"
FontSize="Small"/>
<Label
Grid.Row="1"
FontSize="Large"
HorizontalTextAlignment="End"
VerticalTextAlignment="Center"
FontAttributes="Bold"
TextColor="{Binding TextColor}"
Text="{Binding BillValue, StringFormat='{0:R$ ###,###,##0.00}'}"/>
<Label
Grid.Row="2"
HorizontalTextAlignment="End"
VerticalTextAlignment="Center"
FontSize="Small"
TextColor="{Binding TextColor}"
Text="{Binding Expiration, StringFormat='Vence em: {0:dd/MMM}'}"/>
<Label
Grid.Row="3"
HorizontalTextAlignment="Center"
TextColor="{Binding TextColor}"
Text="{Binding Number}"/>
<BoxView
Grid.Row="4"
Margin="-10,0"
BackgroundColor="Black"/>
</StackLayout>
</material:MaterialCard>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
view raw CreditCard.xaml hosted with ❤ by GitHub

Com este último item e tinha finalizado o que tinha proposto a fazer. Bom eu sei que essa UI pode ser melhorada, tando na ideia quanto no código que constrói ela. Mas realmente fiquei muito contente, não só pelo resultado final e ter minha contribuição aceita, mas principalmente pelo processo de criação. Por mais que tenha sido um processo rápido, coisa de uma noite, me proporcionou uma experiência única.

Nesta imagem temos o resultado final nas plataformas Android e iOS da implementação do projeto, onde pode ser visto o card de saldo, gráfico de movimentações por categoria, lista de movimentações dos próximos 7 dias e os cartões de crédito.
Resultado final

Bom galera por hoje é isso. Espero que gostem desse relato e quem estiver curioso para ver o app é só ir na no meu Github. Até a próxima.

2 comentários sobre “Criando Dashboard de Finanças pessoais com Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.