Flutter development and design challenges. Tips for Developers and Designers

Written by Julia Komin, UX/UI Designer and Filip Kwiatkiewicz, Flutter Developer

Mobile applications are growing in popularity. Thus, more and more development tools appear and grow available for developers who want to create them. Among these tools is Flutter, which has recently started to stand out firmly from the rest. 

Flutter is a free, open-source framework created by Google and released in May 2017. In short, it allows you to create a native mobile app with only one codebase. This means you can use one programming language and one codebase to create two apps (for iOS and Android).

Flutter Design Challenges

An app that requires minimal clicks is easy to use and provides smooth performance is often used by people worldwide. And the more satisfied customers are, the more successful the app is. For users to enjoy using the product, it has to meet specific conditions. The UI (user interface) and UX (user experience) design should be simple, interactive, properly visible, and contain good information architecture. All these things give the user confidence that the app is valuable and can help them get all the expected results in a single touch.

When it comes to the specifics of designing applications for Flutter, it is worth remembering a few rules that will make the work easier, not only for designers but also for the developers. 

Single-resolution design 

When creating an app design for Flutter, there is no need to prepare screens for Android and iPhone requirements. In Applover, we usually prepare the procedure for iPhone resolution (375×812), and based on that, the developer can scale such interface elements as inputs, tiles, buttons, icons, and others, so that they work and look the best, regardless of screen resolution.

Creating one design for all systems

When creating, designers focus on one plan for two systems. It is worth remembering that these structures behave differently in some issues, such as the animation of moving to the next screen. They have different buttons for navigation (on Android it is the back button, iOS has a drag gesture). It’s worth deciding whether you’re going to use a Material design or Cupertino. Of course, if you want to adjust the design to a particular scheme (e.g., to make the button on Android look like in Material Design, and on iOS like in Cupertino), it is possible – remember that there is an additional layer of logic and specifying what button should be used in a particular place. Where possible, follow the guidelines for style guides. Matching one design for two systems is helpful for users; they can learn one interface, and using the same application on different devices is intuitive and familiar for them. 

Component-based design

A designer’s job is to create an application that doesn’t look like a mix of different styles but like a cohesive whole. To do this well, it is necessary to use reusable components that enforce UI consistency and are used throughout the product. This helps to scale interface elements effectively without having to add or rework files or pieces frequently. In addition, correctly naming them, grouping them, and creating a style guide for a particular project helps the developer efficiently navigate the selected screens and speed up work. 

Flutter Development

If we use the potential inherent in Flutter, it can turn out to be a pleasure to work with! In addition, this framework offers many tools to make the developer’s work easier. 

Stateless or Stateful widgets 

Everything visible on the screen of an application consists of widgets, reusable components for creating UI. So if you want to make a new widget, you need to declare a new class extending one of the two basic classes (types) Stateless or Stateful widgets.

Stateless Widget – is the most commonly used type of widget; an immutable state characterizes it. In simple terms, this means that once a widget is rendered, it cannot dynamically change its content. Ideal for use where you have static content or where you are using external state management.

Stateful Widget – simply put, this is a Stateless Widget with added State. As in the previous case, the widget cannot dynamically change its content once rendered, but we have access to additional methods (e.g., setState) that can rebuild (update) the currently displayed widget.

While writing application code, the urge to create new widgets arises, so to save time, you can use the first facility of Flutter that I proposed. You can generate all the above Stateless Widget code with three ‘stl’ letters typed into the IDE (editor). This will make the whole process faster and easier, so you can focus more on filling the widgets with content.

Staying on the topic of views, they are much faster and more pleasant to create than Kotlin, where the initial step is to create an Activity, then a layout in an XML file, and finally to handle it in a previously created Activity.

Hot Reload and Hot Restart functions

When writing application code, it is often necessary to check the current state of the developing feature. Unfortunately, for most programming languages, this involves building the entire application from scratch, which can take quite a while, especially when we often need to check our progress. Using Flutter, we have access to two features: Hot Reload and Hot Restart.

Hot Reload – allows you to see the current changes in real-time. Using this feature does not require us to build the whole application from scratch (only a fragment with modifications). Everything happens on the fly, and we keep the current state of the application. This is ideal for small changes, such as changing the text in the application, changing the arrangement of elements on the view, etc.

Hot Restart – this is very similar to the previous solution. The exception here is forcing the application to start over, which involves not preserving its state. Depending on how extensive the project is, we can save much time.

Hot Reload takes about a second, and Hot Restart about 5-10 seconds. To build an application from scratch, we have to reckon with about a minute and more.

These are only two introductory, strictly Flutter enhancements, but if we want our application to run smoothly and the work in the project to be more efficient and enjoyable, it is worth taking care of a few additional, more general issues. 

The architecture of the project

Well-chosen architecture translates into application scalability, i.e:

• ease of expansion into new functions
• overall performance with a growing number of users and data.

Moreover, a well-chosen architecture makes it much easier to navigate the project. At Applover, in the case of Flutter development, we mostly use Clean Architecture.

State Management

State management involves storing the state of an application or the condition of a specific view (e.g., the contents of text boxes, switch positions) in a particular location. This allows for a more structured data transfer between widgets. By implementing State Management, we try to separate the business logic from the UI. The most common solutions are BLoC / Cubit or Redux. At Applover, we prefer to use Cubit.

The naming of classes, methods, and variables

As the saying goes, try to “call a spade a spade,” we follow this rule. A good name for a class, method, or variable should best describe what it does.

Example:

• right: buildColumnWithUsersNames()
• wrong: buildColumn();

The point is not to create additional work when a programmer comes back to this place in the code and figure out what is going on here and make a transparent environment for someone who might work with this code apart from us.  

In the given example, the buildColumn() command does not give much information about the method. However, the correct name buildColumnWithUsersNames() is much more meaningful.

Where is the growing interest in Flutter coming from? 

Interest in cross-platform apps is growing more and more every month. Wondering what this is due to? We explain! 

In the beginning, when cross-platform applications were still in their infancy, they had some early development problems, such as compatibility issues or performance complications in general. But over time, the technology is constantly being improved, and at this point, we may not even be able to distinguish a cross-platform application from a native one. This, combined with the issues described below, often leads customers to choose Flutter.

One of the undeniable advantages of Flutter is the open code, which means that the publisher and the users, i.e., the developers who use it, influence the development of this technology.

This directly translates to a failure-free, secure, and catalog of extensions. Writing in this technology, the programmer also has access to hundreds of extensions and plugins written by Google or the community, which sometimes significantly speeds up the development process.

Why is Flutter such a big deal?

From the customer’s point of view, the most significant advantage of the Flutter development is the cost savings. Let’s assume that you are a restaurant owner and want to create an app to place orders for food delivery. Additionally, let’s also consider that the estimated time of its execution will be about 200 working hours. If we want to make such an application natively (in Kotlin or Swift), it is necessary to employ two separate teams (Android and iOS)

Estimating the time of application development for 200 hours, which applies to each technology separately, gives us 400 development hours because the situation will be similar when we talk about design, where it is also necessary to have a separate project for a particular platform.

However, if we choose Flutter, we only need one team to create an application for both platforms within the estimated 200 hours. What is more, after the recent major update, it is possible with a small additional effort to create an application for yet another different platform which is the Web. On web pages, we are unlikely to use all of the code of a mobile application. We will need to make changes in the UI layer, but talking about app logic, we may use a significant part of it already existing.

Pros and cons of Flutter app development

Flutter is an excellent tool for creating professional and functional applications. It combines the advantages of natively written applications while remaining cross-platform. The specifics of working with Flutter are not significantly different from working with other technologies. Working with this technology, we can get big-time savings, and the very creation in this framework can be much more pleasant than in the case of a traditional solution. However, it is worth remembering the differences between platforms to end up with a tremendous and consistent multi-platform application.

Designers, thanks to Flutter, can create exciting and not limited to basic component designs in a short time. At Applover, we rely on designer-developer cooperation, which brings benefits in the early design phase because it allows us to avoid inconsistencies and misunderstandings and learn about the limitations and capabilities of a given framework.