DEV Community: rubensdemelo

[Lançamento] Motoca App

rubensdemelo — Tue, 25 Apr 2023 14:48:00 +0000

Gostaria de compartilhar o lançamento do meu novo aplicativo: Motoca

https://motoca.app/

É um aplicativo para motociclistas. Com ele é possível:

Criar e compartilhar eventos de motos.
Controlar o consumo da moto, armazenando os abastecimentos.
Gerenciar o gasto com manutençoes e salvar a nota fiscal.
Criar um perfil e armazenar os dados do motociclista e da motoca. Tecnologias:

Landing page: Astro + TailwindCSS
Aplicativo: Flutter + Firebase

Deixe um comentário se tiver interesse que eu faça um post mais detalhado sobre o processo.

Imperativo X Declarativo

rubensdemelo — Wed, 29 Mar 2023 15:10:00 +0000

Resumão

Imperativa: especificar como resolver um problema; controle detalhado.

Declarativa: concentra-se no que o código deve realizar; concentrar no resultado.

Essas duas abordagens são comumente usadas na programação e é importante entender suas diferenças para compreender melhor o uso declarativo pelo Flutter.

Compreender a diferença, facilita o entendimento em como o Flutter constrói interfaces.

Imperativa

É um processo passo a passo que diz ao computador o que fazer e como fazê-lo. Em outras palavras, é um conjunto de instruções que o computador segue para alcançar o resultado desejado.

A programação imperativa envolve escrever código que especifique exatamente como resolver um problema. Ela é baseada no controle do fluxo de execução usando declarações como loops, condicionais e variáveis. Lembre-se: passo-a-passo.

Adequada para situações em que você precisa ter mais controle sobre o fluxo do programa. Isso significa que se você precisa fazer algo muito específico e precisa ter certeza de que é feito de uma maneira determinada, então a abordagem imperativa pode ser a melhor.

Declarativa

É baseada em descrever o resultado desejado sem especificar como alcançá-lo. Em vez de escrever código que especifica como resolver um problema, a programação declarativa se concentra no que o código deve realizar.

A programação declarativa envolve escrever código que descreve o problema e o resultado desejado, sem especificar como chegar lá. É baseado na definição de regras e relacionamentos entre elementos. Lembre-se: resultado-desejado.

Adequada para situações em que você deseja descrever o que deseja alcançar, sem se preocupar em como chegar lá. Isso significa que se você deseja se concentrar no resultado, e não no processo.

Ao trabalhar com interfaces de usuário, usar a abordagem declarativa para garantir que a interface pareça e se comporte exatamente como você deseja, sem se preocupar com a forma como é implementada.

Na prática

SQL: Declarativo. Declaramos o resultado ao banco de dados: inserir, atualizar, excluir, consultar... mas nós não o instruimos em como ele deve executar tais operações.

Algorítimo: Imperativo. Imposto a cada linha de código como ele deve se comportar. Declarar variável, computar valores, avaliar expressões. Estamos instruindo exatamente o comportamento que queremos que o programa tenha.

Flutter

Como mecionado anteriormente, o Flutter utiliza a abordagem declarativa: resultado.
Ao construir interfaces com ele, declaramos algo como: 1 imagem, 2 campos de texto e um botão.

E o framework se encarrega de todo o resto, sem se preocupar com a implementação de cada elemento.

Com isso, os desenvolvedores podem se concentrar no que desejam alcançar e deixar que o framework se encarregue de como implementá-lo.

Flutter at Google I/O

rubensdemelo — Thu, 16 Jun 2022 03:14:43 +0000

Google I/O is one of the most significant tech events in the world. For people, the press, and tech artists/enthusiasts.

Flutter 3 was introduced at Google I/O 2022.

But his debut at this event was in 2017.

Here is a quick recap on how Flutter evolved and how the headlines changed over time.

2017: Single codebase, two apps

A simple app built with Flutter + Firebase

"learn how to build beautiful cross-platform UIs with Flutter"

2018: Production ready
BLoC state management at stage

"practical demonstration and live coding, learn patterns for crafting elegant and intuitive code"

2019: A portable UI framework

Shout-out for provider

"understanding the main approaches of state management in declarative frameworks"

2020: no event

2021: Leading UI toolkit for multiplatform

Top 7 Flutter things

"practical demonstration and live coding, learn patterns for crafting elegant and intuitive code"

2022: From a mobile-centric to a multiplatform

6 minute recap

"practical demonstration and live coding, learn patterns for crafting elegant and intuitive code"

Conclusion

Wow... what a journey from two apps to multiplatform.

Hard (and smart) work for the Flutter team and community.

A single codebase targetting six platforms.

What's next 🤔

Drop a comment

Thank you,
rubensdemelo

Flutter, React Native, Ionic and Native platform: A visual guide

rubensdemelo — Sun, 04 Aug 2019 21:26:40 +0000

Cross-platform development has another big player: Flutter, the Google toolkit that allows us to create apps to iOS and Android (and soon to desktop and web).

Build mobile apps is a challenge. Especially because we need to target two different platforms. Unlike the web, where HTML, CSS, and JS aims to work in every browser (no matter what the size of the device), iOS and Android platforms had his own environment (language, tooling, approaches, etc).

Some cross-platform tools, like React Native, Ionic, and Flutter came to help us to build once and deploy on both platforms.

In this post, I will show you a visual guide to illustrate the difference between all of them. Let's get started!

Ionic

It is like a dream, write code with HTML, CSS, and JS, and deploy to iOS and Android. The app is a website. To achieve that, tools like Ionic, Cordova, and PhoneGap uses a WebView to render the code. But there is a bottleneck: performance. If the app needs to access hardware services (GPS, sensors, etc) it needs to cross a famous bridge. But if your app does not need those services, this tech should be on your radar.

Native Platform

Your code (kotlin/swift) interact directly with the platform. If you need a button, the platform provides that button. Access to the camera? No worries too. Thit is the best option for mobile development! But you can't code once and deploy to both platforms. You need to write an app to iOS and other to Android, which makes this choice expensive.

React Native

The tool powered by Facebook is so far the most popular choice for cross-platform development. It has a huge community, widely used by a ton of companies, uses Javascript. React Native truly provides an excellent way to build high-quality mobile apps if you are a frontend developer. But is uses the bridge extensively, for hardware services and native components (buttons, text fields), which can bring some performance issues, especially with animations.

Flutter

The youngest option for cross-platform development (by Google), has a peculiar aspect: it uses Dart language (also by Google), which enables the code to be compiled (AOT) to arm/x86, wich is straightforward runs on the hardware (if you need need a button, Flutter paint it on screen, if you need to interact with hardware, Flutter provides a plugin ). It has 71k+ stars on the repository, gradually being adopted by big companies (Alibaba, Tencent, BMW). It has some weakness, like 7k+ issues and the fact that you have to learn Dart (but this doesn't make sense, if you know JS, Java, or any C-style language).

I hope you now know the differences between each option and have more clarity to choose one to learn and or use in your next project.

Flutter: Widget tree and state management

rubensdemelo — Tue, 02 Jul 2019 07:43:09 +0000

In Flutter, everything is a widget

Widget tree is a structure that represents how our widgets are organized.

Web pages have a DOM and Flutter have a Widget Tree.

Flutter also uses a declarative UI approach, it means that the interface represents the state of the app.

So, as we build our application, composing widgets to each other, this structure can (and certainly will) grow. As it gets bigger, it gets more complicated to represents the state of our application in the interface.

The image below is from documentation and represents perfectly a shopping cart:

MyApp - The root widget. Our app starts here.
MyLoginScreen - Initial screen.
MyCatalog - After sign in, the screen has a list of products and an app bar which allow the user to access the cart.
MyCart - When the user chooses a product, that one is put within the cart.

The key point here is the user action to add products to the cart, because you need to inform MyCart, that your status has changed, now it has 1 item (MyListitem).

In this scenario, our widget tree is small. Imagine if within the catalog we had a division by categories and sub-categories or that in the cart we could have a wishlist, gift list or the user having a screen with details of your profile, history of all purchases. Easily our widget tree will become bigger and more complex.

So, we have several widgets that can consume and/or update the state of the application.

Knowing this, from now on, we will be guided by the "rule" below:

Only rebuild the required amount of widgets when the application state changes.
How to follow this rule? Using some state management solution.

State Management

This isn't a simple topic in any framework. And with Flutter isn't different.

Flutter is a non-opinated framework, that is, it does not "think" how you should do things. It does not force you to use embedded solutions and/or patterns. It leaves you free to choose the most suitable solution for your project.

And Uncle Ben already teach us:

With great power, comes great responsibility

Choosing the right solution for your project is fundamental to a good development cycle. You can not get ahead to find out that the chosen solution has become a bottleneck and is making it difficult to maintain, create new features or even limit the expansion of our app.

There is no better solution or a solution to every problem. Each of them has its strengths and weaknesses.

On the next article, I will write a bit about scoped_model and provider.

scoped_model was the first package explicitly recommended by Flutter documentation.

provider is the newest recommendation. Flutter team endorsed the use of this package on state at last Google IO. It is more robust than scoped_model and still easy to understand.

See you soon :)

How to not start with Flutter

rubensdemelo — Sat, 25 May 2019 13:12:15 +0000

How to not start with Flutter

Some days ago I posted on twitter my biggest mistake about learning Flutter:

(Now, provider package is the new recomendation by Flutter docs)

Motivated by a lot of questions on Stack Overflow about "BLoC" pattern,
I decided to share on Twitter (and surprisingly got some nice feedbacks) and now write this post to help future flutter developers.

Almost every single day, newcomers on flutter post questions about "BLoC" or even worst, about packages that makes "simple" to implement this pattern.

You have other topics that really matter in the beginning:

Dart language (even if it is not hard)
Widget tree
Box Constraints
Basic widgets
Stateless and Stateful widgets
Navigation
Widgets lifecycle
Material and Cupertino packages
Keys

When you need to share values between widget or pass them down in your widget tree, use InheritedWidget, it is easy and probably meet what you need in the first steps. If you already use MediaQuery.of(context) or Theme.of(context), you already used InheritedWidget.

And even after having good knowledge about topics above, when you started with state management, there are excellent packages to start: scoped_model and the most recent and powerful provider. I strongly recommended scoped_model. It is simple to understand, well documented, works fine for small and medium apps (no matter how complexity app is) and was explicitly the first package about state management recommended by Flutter docs (and now provider is the new black).

Keep in mind that state management isn't a simple topic, there isn't a better approach and Flutter let you chose whatever solution you want. And the most important on your journey is to discover what solution fits your needs and what solution you feel more comfortable and confident to use in your app.

In conclusion, would like to point that this article is not against Bloc pattern (definitely not). It is just an advice for those who are arriving in Dart & Flutter side and may be frustrated trying to implement Bloc when they don't need.

Flutter Forms: Improving UX with SingleChildScrollView

rubensdemelo — Tue, 15 Jan 2019 20:33:02 +0000

Some times the first user interaction with our app is a login/register screen. As a great Flutter developer, we would like to provide the best experience. Ever. So, we do your best and make a gorgeous screen.

Easy to combine a Colum(), TextFormField(), MaterialButton(), SizedBox(), centered with Center(), a small Padding() and voilà:

It’s done! Really beautiful, then we started our tests and…

Yep, something crash in our screen. If we try oll up, it won’t work.
Alright, let’s check messages on console:

In technical terms, the size of our viewport were reduced and it caused a overflow on our layout.
But Flutter error messages are awesome! It suggests:
consider clipping it with a ClipRect widget before putting it in the flex
Or:
using a scrollable container rather than a Flex

Searching on docs we found a Scrollable widget: A widget that scrolls. Fine, but on next paragraph: It’s rare to construct a Scrollable directly.

Got it. Once it’s rare, we probably don’t need to build it.

But, what widget solve our problem ?

A built-in widget provided by Flutter and works perfectly in this case is SingleChildScrollView.

This widget is useful when you have a single box that will normally be entirely visible.

This is a superpower widget.

First, let’s try to fix our screen and then dive deep into this widget. Wrapping our Center() as SingleChildScrollView() child’s.

Well done! Our screen now works perfectly. We can roll up and down and everything is fine!

SingleChildScrollView supports following parameters:

child: (Widget) — The widget that scrolls.

controller: (ScrollController) — An object that can be used to control the position to which this scroll view is scrolled.

padding: (EdgeInsetsGeometry) — The amount of space by which to inset the child.

physics: (ScrollPhysics) — How the scroll view should respond to user input.

primary: (bool) — Whether this is the primary scroll view associated with the parent.

reverse: (bool) — Whether the scroll view scrolls in the reading direction.

scrollDirection: (Axis) — The axis along which the scroll view scrolls.

And as I said before, this is a superpower widget and we will explore on next article.

Thanks for reading. See you soon

Flutter: Formatting TextField with TextInputFormatter

rubensdemelo — Fri, 11 Jan 2019 20:27:04 +0000

A common task in mobile apps is formatting fields, like credit cards, phone numbers, zip code, etc. In Flutter, we achieve this using TextInputFormatter.

In TextFormField and TextField, the property inputFormatters allows you to pass a list of TextInputFormatter to define how that field will behave.

There are 3 useful built-in implementations:

LengthLimitingTextInputFormatter: prevents the insertion of more characters than a limit;

WhitelistingTextInputFormatter: allows only the insertion of whitelisted characters patterns;

BlacklistingTextInputFormatter: prevents the insertion of blacklisted characters patterns.

And they have some static properties to help us:

WhitelistingTextInputFormatter.digitsOnly: takes in digits [0–9] only.

BlacklistingTextInputFormatter.singleLineFormatter: forces input to be a single line;

You can combine formatters:

With RegExp, you can customize your formatters (as above properties does):

WhitelistingTextInputFormatter(RegExp("[a-zA-Z]"))

BlacklistingTextInputFormatter(RegExp("[/\\]"))

It is simple and easy to use, but some times you need create your own formatter. And it is easy too. Just extend TextInputFormatterand implement formatEditUpdate method.

Take a look on the code bellow, from flutter_gallery example app:

As we can see, there is no limit.

Flutter offers to developers excellent built-in formatters and makes easy to extend and create our own. Let’s use.

Make easy to your user input data in form fields with formatters.