Flutter for Elixir Developers: Adopting Flutter for Cross-Platform App Development

At SmartLogic, we began working with Flutter in Spring 2021, and we’ve been impressed with the benefits. Flutter app development allows us to create native applications for iOS and Android with consistency and efficiency.

Our team recently worked with WCK Direct, a platform that provides meals to households experiencing food insecurity. We were able to create a new iPad app with Flutter that helps restaurants manage orders, scaling the program to reach more people in more locations.

What is Flutter?

Flutter is an open-source UI toolkit that uses the Dart programming language, and the framework is reminiscent of React Native. As a framework, it enables developers to build Android, iOS, and web applications using a single codebase. This saves time and effort while maintaining consistency across different devices.

The compiler is a key feature that translates the Dart programming language in Flutter applications into native code for different platforms. Flutter web hot reload makes it easier for developers to see the changes in real time without restarting the application.

A significant difference between Flutter and other frameworks lies in its rendering approach. Instead of relying on the traditional Document Object Model (DOM) used by web applications, Flutter uses a widget tree. Widgets are the components of Flutter UI, which can be composed to create complex and custom user interfaces. This approach allows for more control over the appearance and behavior of the app, as well as better performance compared to DOM manipulation.

For a comprehensive introduction to Flutter, its components, and how it can benefit developers in creating modern, cross-platform applications, check out Clearing the Clutter: Adopting Flutter.

Is Flutter easy to learn?

In the season 10 premiere of the Elixir Wizards podcast, Sundi shares, "my overall thought about my experience with Flutter and working with a heavily type system would be impressed." Developers on our team with varying backgrounds and TypeScript experience echo this sentiment. Extensive, well-organized Flutter documentation allows developers to find the necessary information to troubleshoot and learn Flutter. The community is active, and developers contribute to online forums, create Flutter tutorials, and share experiences, offering plenty of resources for newbies.

The widget-based approach to building UIs simplifies the process. Flutter uses the Dart Programming Language, which is readable and straightforward. Dart's syntax is familiar to those experienced with languages like JavaScript. Flutter integrates with popular IDEs like Visual Studio Code and Android Studio and offers features like auto-completion, debugging, and more. These tools streamline the development process.

Why Does SmartLogic enjoy using Flutter?

Types vs Dynamic

The Dart programming language is strongly typed, which means variables have a specific type, and the compiler can catch errors related to type mismatches at compile time. This provides better direction on errors and helps prevent bugs in the long run.

The key benefit of using a strongly typed language like Dart is the ability to catch type-related errors early in the development process, leading to more stable applications. In contrast, dynamic languages like JavaScript may result in type-related errors being overlooked until later, sometimes during runtime, which is more difficult to debug.

As Elixir enthusiasts, we see the different programming paradigms and use cases for both languages. Elixir has a different approach to state management than Flutter, using a functional programming approach instead of the reactive one used in Flutter.

Dart is best for cross-platform mobile and web application development with Flutter; Elixir excels in web development due to concurrency, fault tolerance, and code that is easier to reason about, test, and maintain. Choosing between Dart and Elixir depends on a project's specific needs and requirements. Being fluent in more languages helps us choose the best tool for the job and expand our understanding of what is possible and how it can be done.

Tooling

Flutter integrates with Visual Studio Code and provides developers with useful features like autocomplete and in-editor debugging. The streamlined development environment is efficient, and the integration of null safety prevents runtime errors caused by null values.

Fastlane simplifies deployment to Android and iOS platforms. The streamlined approach helps developers save time and effort and keeps your app consistent across devices. For dependency management, Dart has its own package manager, pub, which is like Elixir's mix, making it easier to manage and update libraries and dependencies. The Flutter Github repository is active and allows developers to contribute and collaborate.

Styling

Styling in Flutter vastly differs from traditional web app development and doesn't rely on CSS for styling. Instead, Flutter uses widgets to define styles, which provides a flexible and unified design across platforms. Instead of using CSS properties, developers can use widgets like TextStyle for text formatting or the Flex widget for controlling layout and positioning. This approach takes some getting used to, especially for developers with a background in web development, but it ultimately enables more consistency.

Native mobile development often has styling conventions specific to the platform, such as Android's XML layouts or iOS's Interface Builder. In contrast, web development typically relies on CSS and HTML to create and style elements. This is where the implementation differences between Flutter and Phoenix become more pronounced. Flutter's widget-based approach to styling allows developers to build cross-platform applications with a consistent look and feel. Phoenix is a web-focused framework that uses traditional CSS and HTML-based styling methods.

Flutter App Development at SmartLogic

SmartLogic is an experienced Elixir consultancy with expertise in Elixir, Flutter, React, Ruby on Rails, and other languages and frameworks. We leverage the strengths of each technology to build robust, high-performance solutions that meet our client's unique needs. We offer mobile and web application development, product design, back-end development, DevOps configuration, and API development. We continue to learn the latest skills and best practices in each domain.

Backend Elixir developers who support mobile apps and full-stack Elixir developers who build mobile apps can benefit from learning Flutter for cross-platform development. This knowledge empowers developers to make informed decisions about the best tools and approaches to use on a project. Likewise, a Flutter developer can benefit from understanding the strengths of Elixir and how it complements Flutter in building scalable and maintainable applications.

At SmartLogic, we pride ourselves on our ability to adapt and grow our expertise in various technologies to provide the best possible solutions for our clients. We continue to learn and embrace new tools and techniques to expand our knowledge as developers and tailor our services to each client's unique requirements.