First experience of Flutter for a Web Developer

Another Programming Language

  1. Declaring Variables:
    Variables cannot be typed in JavaScript, unless it is not TypeScript. In Dart it is required either to create explicitly typed variables or the system will give the proper type automatically.
// JavaScript
var name = 'JavaScript'
//Dart
String name = 'dart'; // Explicitly typed as a string.
var otherName = 'Dart'; // Inferred string.
// Both are acceptable in Dart.
// JavaScript
var name; // == undefined
// Dart
var name; // == null
int x; // == null
// JavaScript
var name; // == undefined
if (!name) {
console.log('falsy'); // falsy
};
// Dart
if (name == null) {
console.log('true'); // true
};

Flutter Framework

  1. Widgets:
    In popular Frontend frameworks the blocks building an app are called Components. In Flutter these blocks are called Widgets. Component class is extended from ‘React.Component’ that is imported from ‘react’ library. Flutter Widgets are provided by MaterialApp library. Every widget is a Class, while Components in React can be functional components.
  1. The structure of Widget Class is similar to the React Class Component — it has a build() method which returns the widget the same way as the render() method returns JSX.
    Also it contains other lifecycle methods if needed.
  2. Widgets can be Stateful and Stateless which means that they can be with or without their own state as it is in ReactJS, VueJS or any other framework. But unlike VueJS and similarly to ReactJS, the state in Flutter should be changed by a setState() method. So reactivity works in a similar way with ReactJS.
  3. Passing the props from parent Widget to child Widget works with the same principle as in ReactJS or VueJS. The only thing is different — data binding and passing methods between parent and child in Flutter is similar to React but not to VueJS. In VueJS we use emit for that, in React and Flutter just pass the callback with props. So, in Flutter we have two way data binding.
  4. Lifecycle methods are having the same idea as in other Frontend frameworks, just with different naming. For example, React’s componentDidMount() and Vue’s mounted() in Flutter are called onInit(), componentDidUnmount() and unmounted() are the same as dispose(). In addition, Flutter has lifecycle method that reacts on setting the app on background and launching it back to foreground — didChangeAppLifecycleState();
  1. Familiarity with ReactJS. As I had experience working with ReactJS framework it helped me a lot with understanding how widget works and I felt really comfortable developing Flutter.
  2. MaterialApp provides a lot of widgets like AppBar, Buttons, NavigationBar and many other stuff with implemented logic with it which helps developers to not spend time writing additional lines of code and to create whole screens really fast without big efforts. Of course, we have material libraries such as MaterialUI and Vuetify, but for me Flutters MaterialApp gives more build-in features.
  3. Flutter can be combined with libraries which we often use with frontend frameworks like Redux, GraphQL, i18n, Google Maps and many other cool instruments! On my current project we are using GraphQL and it is pretty the same as I used on our web version of the same project. Especially I want to emphasize libraries created by Google, for example Google Maps. As Flutter is created by Google, it perfectly works with Google’s APIs which is a really great feature.
    But currently the Flutter’s ecosystem is rather small compared with the JS community. There are not many contributors of different useful and powerful libraries like GraphQl etc. As a result, if a developer has faced an issue with a specific library he might not find a solution for it. So it can take a lot of time and effort to handle this problem. In such cases it’s always risky to use libraries developed not by Google. So I, as a Flutter developer, strongly recommend to be active in the Flutter community and if you handle some issues which have not been solved before, please share your experience and knowledge!
  4. Learning Dart was easier than I expected. This programming language is kind of mix of JavaScript and any other OOP language like Java or C#. Developers having experience with TypeScript and basic principles of OOP should have no problems with learning Dart.
  1. Debugging process. The developer tool provided by Flutter is not that comfortable as web developers have in a browser. For me, developer tools in browsers are more powerful and I hope Flutter team will make some improvements related to that point in the near future.
  2. Due to the fact that the Flutter community is not as big as JS (React, VueJS, Angular) or any other big communities, sometimes it is unclear what tools would be most recommended and work better with Flutter applications. For example, the best state manager for VueJS is Vuex, for React the most common tool is Redux (MobX is pretty popular as well). Flutter does not give information which tool will be the best solution for a specific task, it just provides a list of state manager tools which are supported and shows their features, advantages and install instructions. So when it comes time for choosing the specific tool, developers should spend additional time to analyse and make a decision which one fits to a project the best.
  3. According to a fact that MaterialApp library helps a lot with building a mobile app really fast, providing widgets that have ready logic and styling, sometimes it’s very difficult to customize and override it to something specific required by a project. I could spend a couple of hours making buttons or navigation bar working or looking the way business need. But I guess frontend Frameworks are having the same issues while using UI libraries.
  4. Enabling some specific device features like background services can be a real challenge. The features like that should be configured on both platforms — Android and iOS separately, and then applied in a codebase. For a person, who has no experience working with such things can be a real challenge. In addition, there are a lot of requirements related to user permissions.
  5. Process of applying an app to the Apple Store sometimes can be really difficult. This part of development is not exactly related to Flutter, and iOS developers are facing this problem as well. But still, before starting creating a project for iOS, developers should be aware of the really accurate process of filling information, explaining a need for different user permissions and a lot of additional information for applying an app to the Apple Store.
    In addition, Flutter community doesn’t provide information how to make an app automatically update when its new version is available.
  6. Testing with an emulator does not always represent how the application will behave on a real device. So for proper testing it is needed to connect to a real device or to publish an app to a TestFlight or any other testing tool.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store