The New Form of Mobile App Development

Every Mobile Developer's Dream

📅 2020.03.25 - 👤 Borbély Viktor

Google rolled a big one in the field of multiplatform mobile app development. 2019 gave this the final push with strong promotion of the Flutter UI toolkit. Flutter is such a multiplatform framework that multiplies productivity in the development team. It’s not purely about being able to develop for Android, iOS, Desktop, and Web (and the list continues) with one codebase.

The development process itself greatly speeds up by getting a live view of the interface as soon as we save our code modification. Of course, the price of this is that the code must be written in the Dart language developed by Google. Of course, for those who already know an object-oriented language (Java, JavaScript, TypeScript, C++, Kotlin, etc.) this is not an obstacle. And for those for whom this is their first language, they will learn a modern language. Learning coding syntax can be measured in a few hours, at most days.

Everything is a “Widget”

That’s right! Whatever we start on the interface, we will surely need a widget. But what is this really? Widgets are such small building blocks from which independent, pre-written, but largely customizable interfaces can be created for our personal needs. Okay-okay, but what can it do? Think of a simple button. This is a widget, with its abstraction. If we have a button, with a few parameter settings, its color, text color, text style, corner rounding can be modified. In short, anything. Understand, really anything!

Material package

The best part of all is that Google built a complete graphical UI/UX open-source description for this. Engineers collected this with many years of experience on what looks good on a mobile display and what makes interaction unambiguous. It provides guidance on design principles, styles, proven methods. It provides help for using and designing individual components (widgets) and icons. Not forgetting Accessibility, that is, it also thought of those who have difficulties with basic handling. E.g., visually impaired, hearing impaired, or have cognitive deficiencies.

It’s worth visiting their page https://material.io. We will return to this great package later.

Examples

Let’s not let this writing pass without looking at a few interfaces.

Do we still remember Activities and Fragments on Android? Well, here we don’t have to mess with this. We settle navigation in a few lines. Transitions are beautifully done by default, but we can fine-tune them.

Basic screenshots with navigation

Button

Defining a button is simplest with a RaisedButton widget. This is still wrapped in a Transform.rotate widget that handles rotation.

Transform.rotate( angle: 0.2, child: RaisedButton( color: Colors.amber, elevation: 5, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), child: Padding( padding: const EdgeInsets.all(10.0), child: Text( “Switch to Page Two”, style: TextStyle(fontSize: 20, color: Colors.green), ), ), onPressed: () { Navigator.of(context).push( MaterialPageRoute(builder: (context) => PageTwo()), ); }, ), )

ListView

List view simply. No need to mess with the RecycleViewHolder nightmare like before. We list the widget elements in ListView and we’re done.

@override Widget build(BuildContext context) { return Scaffold( … body: Container( padding: EdgeInsets.all(10), color: bgColor, child: ListView( children: [ ListItem(order: 1), ListItem(order: 2, onPress: _navigateToPageTwo(context)), ListItem(order: 3, onPress: _navigateToPageTwo(context)), ListItem(order: 4), ListItem(order: 5), ListItem(order: 6), ListItem(order: 7), ListItem(order: 8), ListItem(order: 9), ListItem(order: 10), ], ), ), );

AppBar

For page top navigation, there is also a ready solution. The widget called AppBar can then be parameterized as desired. It knows the usual material interfaces. If it’s not sufficient, then of course we can customize it.

SliverAppBar

Complex motion effect supplementing AppBar. With this, we can create very spectacular navigation. See the app bar on Page Two at the top.

The codes are available from GitHub.

I’m curious about your opinion. Write in a comment if you liked it or something needs improvement.