What is a widget?

If you ever worked with a web framework like React, you should know the concept of components. Flutter widgets are directly inspired by this idea. Widget is a reusable piece of code, which describes how your application’s UI looks like. Widgets define the user interface by their state. In some cases, the state can be static and not change over time – see the section below about Flutter widget types for details.

As soon as a widget’s state changes, Flutter rebuilds its outlook and in effect re-renders the GUI. The framework is said to do it efficiently by measuring what has changed in the widgets tree since the last rendering and re-paints only what’s necessary.

The most basic Flutter app might look as follows:

The runApp() method takes a Widget as its argument. In our case, it takes a Center widget, which has one child – a Text widget. As expected, such a simple Flutter app shows a “Hello Flutter!” text at the center of the screen.

This simple example shows us a few interesting facts:

• there are many built-in widgets, like Center and Text
• widgets can have a child or children – this is widgets nesting and it happens all the time and can be very deep
• Flutter widgets can have their own properties, like textDirection.

Widgets nesting sometimes makes simple Flutter apps having a lot of source code inside a single file. However, as I mentioned in the previous post, don’t get discouraged by that Actually, having a lot of nested widgets in Flutter is a good practice. If you have a few huge widgets without much nesting instead, it means that there’s something wrong with your implementation. Flutter widgets – as all reusable pieces of code – should not have too many responsibilities. SOLID also applies here

Viewing Flutter widgets with Flutter Inspector

As widgets tree may get big and quite heavily nested, there’s a very useful tool to easily view and explore it. This tool is called Flutter Inspector.

While in debug mode in Visual Studio Code, you can launch it by clicking the blue magnifier icon:

It opens in a web browser and allows you to see the whole widgets tree in your app:

There’s a very handy feature “Select Widget Mode” which, when enabled, lets you select the widgets directly in your emulator or phone. After doing this, you can see the selected widget’s properties in the inspector.

Types of Flutter widgets

In Flutter, you can – and will – create your own widgets. Widget is just a Dart class which extends a proper base class. Depending on whether your widget actually manages any state and changes over time, you have two types of base classes to inherit from – StatelessWidget or StatefulWidget.

The main purpose of each type of widget is to provide an implementation of a build() method which returns a Widget object. However, each widget type does it a bit differently. Let’s see this in action.

StatelessWidgets

The simplest widget you can create is a stateless widget. You create it by simply creating a class extending StatelessWidget. Here’s the sample source code and a view it generates:

	import 'package:flutter/material.dart';
	void main() => runApp(
	MaterialApp(
	title: "My CodeJourney Flutter app",
	home: Scaffold(
	appBar: AppBar(
	title: Text("My First App"),
	),
	body: MyFirstWidget(),
	),
	),
	);
	class MyFirstWidget extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Container(
	padding: EdgeInsets.all(8.0),
	child: Text(
	"Hello MyFirstWidget!",
	style: TextStyle(color: Colors.green),
	),
	);
	}
	}

view raw main_stateless_widget.dart hosted with ❤ by GitHub

You can play with it yourself in the DartPad.

There are quite a few new things in the source code. Let’s point them out:

• as our main widget, we used MaterialApp and provided it to runApp() method. MaterialApp widget gives us material design for our app out of the box. As soon as you use it, you can nest more material widgets from the widgets library. There’s a similar widget for Apple-oriented widgets called CupertinoApp, which allows using Cupertino widgets
• we used another material widget – a Scaffold. It provides us with an appBar and body properties – setting them we’re getting this nice-looking application’s skeleton with entitled app bar and home for our widget. Scaffold also gives us many things “for free”, e.g. FloatingActionButton
• body of our Scaffold is our first own stateless widget – MyFirstWidget. As mentioned before, it overrides the build() method, which simply returns another widget tree. Notice the usage of a Container widget, which is very useful for grouping other widgets.

StatelessWidget is simple, works and is just there Let’s see something more interesting now – StatefulWidgets.

StatefulWidgets

When you want your widget to change over time and maintain its state (in most cases you do), you can create a stateful widget. You do it by creating a Dart class extending StatefulWidget. Unlike StatelessWidgets, StatefulWidget doesn’t override the build() method. Instead, it implements a createState() method, which creates the initial widget’s state (see below).

Apart from the main widget class, which itself is still “final” (or better said – immutable), you create a class extending State. This class maintains the actual state and it is now who provides the build() method’s implementation.

Let’s see the sample code and produced GUI:

	class MySecondWidget extends StatefulWidget {
	MySecondWidget({Key key}) : super(key: key);
	@override
	_MySecondWidgetState createState() =>
	_MySecondWidgetState();
	}
	class _MySecondWidgetState extends State<MySecondWidget> {
	int _clickCount = 0;
	void incrementClickCount() {
	setState(() {
	this._clickCount++;
	});
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("My First App"),
	),
	body: Container(
	padding: EdgeInsets.all(8.0),
	child: Text(
	"Hello! Times clicked: "
	+ this._clickCount.toString(),
	style: TextStyle(
	color: Colors.green,
	fontSize: 20.0),
	),
	),
	floatingActionButton: FloatingActionButton(
	child: Icon(Icons.add),
	onPressed: this.incrementClickCount,
	),
	);
	}
	}

view raw main_stateful_widget.dart hosted with ❤ by GitHub

The full code you can play with is available in the DartPad.

Now some comments about the StatefulWidget code:

• notice how MySecondWidget class passes a key to its superclass. Concept of Flutter widgets keys is interesting and we’ll dig into it in a separate post. For now, just treat it as a convention to always accept a key as a named argument and pass it to the base class
• as said before, in this simple example, MySecondWidget only creates the initial state by instantiating _MySecondWidgetState
• you’re already familiar with most of the code in _MySecondWidgetState, but notice the usage of setState() in incrementClickCount() function. It tells Flutter that the state has changed, so the framework can re-render the UI. If you directly change the value of this._clickCount without calling setState(), GUI will not be updated until setState() is called in some other place. We’ll talk more about state management techniques in Flutter in the future articles
• note how easy it is to add a FloatingActionButton thanks to using Scaffold material widget.

That was easy and works nicely! You now know how to use both Flutter widget types

Flutter quick actions in VS Code

I’d like to share with you two easy tips for working with Flutter in Visual Studio Code. Both speed up the development nicely. It assumes that you configured VS Code properly (if not read this article) and have Flutter extension installed.

Ctrl + .

First important keyboard shortcut is Ctrl+. (Cmd+. on Mac). It allows you to perform many element-contextual actions. For me it’s most useful for removing widgets or wrapping widgets with other ones:

Snippets for widgets creation

Another useful feature are code snippets for creating widgets. You use them by starting to type their acronym in your .dart file. There are two acronyms for widgets creation – stless for StatelessWidget and stful for StatefulWidget scaffolding. The usage looks as follows:

Most popular Flutter widgets

I wanted to list you here some most popular Flutter widgets, but they are quite well described here. You can also search through the widgets library. We’ve also used quite few of them in our examples above

Community widgets

Many more people are starting to use Flutter and they also create a lot of community widgets. You can find the Dart packages for Flutter on pub.dev. I also recommend checking the Flutter Awesome website where the best Flutter widgets, libraries and other extensions are listed.

Summary

That’s it! You’ve just learned how to use stateless and stateful widgets in Flutter. We’ve also seen what’s the difference between them and what are some basic conventions in creating them. There’s a lot more to Flutter widgets and related topics, but these are topics for separate posts. I hope to publish more of them soon

In my opinion, bringing components into the mobile world in the form of widgets is a very nice idea. They give quite a good separation of logic and GUI management. For sure it’s a fresh start, totally changing the way in which we think about mobile apps development. Components have done their job in the web world, so why would widgets not succeed in mobile apps? We’ll see!

What do you think? If you are interested in some particular topics related to Flutter – let me know!

The post Basics of Flutter Widgets appeared first on CodeJourney.net.

What is Flutter?

Flutter is an open-source platform and development kit created by Google. You can use it to create mobile (Android, iOS), desktop (Windows, Mac, Linux) and recently also web applications.

Flutter is quite new, as it’s first official version 1.0 was released in December 2018. Before, it was developed and used internally by Google for a few years.

Since this time, countless Flutter apps have been published. You can find their list for instance here. One of the most well-known Flutter apps is Xianyu app created by Alibaba and used by 50M+ people.

The main purposes of Flutter are claimed to be fast development, beautiful and consistent UIs and native performance on each platform.

Dart as a programming language

Flutter uses Dart as a programming language. Why is that? Well, of course, Dart is also developed by Google However, one of the real reasons is believed to be performance.

As you probably know, Flutter is not the first (and not the last) cross-platform mobile development platform. Its main competitor is React Native, which uses JavaScript. Dart compiles to the given platform’s native machine code. Thanks to that, it doesn’t have to use a JavaScript bridge to interact with native components that React Native apps have to do. I don’t know how true this is in real life and how it helps with performance, but that is one of the reasons for using Dart as a programming language for Flutter apps.

Dart is a UI-oriented language. For C/C#/Java developers, Dart’s syntax will be rather familiar and easy to learn. It’s object-oriented, including support for classes and interfaces. The language is type-safe, meaning it combines static and runtime types checking.

Dart is supported by its virtual machine, which also provides – amongst others – a garbage collector (if you don’t know what the GC is, check out this post).

Here’s a simple program written in Dart:

You can play with the code yourself in the DartPad.

Another interesting feature that is possible thanks to Dart is the hot reload. We’ll explore it later, but it significantly speeds up the development and testing time.

If you want to learn more about Dart, check out the official docs.

Everything as a widget

The main concept in building Flutter apps are widgets. In Flutter, everything is a widget – buttons, texts, menus, colors, themes, spacings and paddings. Even your Flutter app is a widget.

What’s very interesting is that Flutter doesn’t use platform native widgets. Instead, it provides its own set of widgets for each platform, e.g. Material Design for Android and Cupertino widgets for iOS. Additionally, as a programmer, you can create your own widgets. Thanks to that, all Flutter apps look pretty much the same on every Android/iOS version. You don’t need to worry about some UI elements changes between OS releases. At the same time, an app built using these widgets looks like native GUI.

Thanks to the widgets concept, Flutter apps can be easily personalized and branded. Recent researches show that customers are now starting to prefer more specific-looking apps to standard and boring native-designed UIs.

The drawback which I see about widgets is that there’s normally A LOT of source code in Flutter apps. Don’t get confused straightaway

Installation and configuration

Now, let’s get into the real work. It surprised me how easy it is to start working with Flutter. As you’ll see in a moment, you can build quite a nice-looking mobile app with Flutter in less than 30 minutes!

There are several possibilities to work with Flutter. You can easily set up Android Studio or IntelliJ. For example purposes, we’ll focus on running and debugging an Android application on Windows PC using Visual Studio Code. If you’re on Mac or Linux, check out a corresponding official installation guide.

Install Flutter and Android SDK

The installation process is quite easy. Initially I wanted to describe it here for you, but actually the official installation docs do it pretty well I’ll just guide you through the steps below with links to the official installation guide.

Install Flutter SDK and Android Studio

First of all, install Flutter SDK and Android Studio (which is required for Android SDK) following this installation guide. The process is fairly easy and should not take more than 15 minutes. Remember about using flutter doctor command to verify if everything is installed correctly – it gives very clear messages. In the end, using VS Code and having Android phone connected in USB Debugging mode, your flutter doctor command should have an output similar to mine:

Configure Visual Studio Code

The next step is to configure Visual Studio Code to be able to develop, compile, run and debug Flutter apps. You only need to install the Flutter extension, which is very well described here. It should also automatically install the Dart VS Code extension which adds Dart language support to VS Code.

Your first Flutter app

Now let’s finally create this first Flutter Android application It’s probably gonna be the quickest part!

Create and run a sample app

First of all, open Visual Studio Code. Use Ctrl+Shift+P to open a Command Palette. Start typing “Flutter” and select Flutter: New Project:

In two next steps specify your project’s name (e.g. “hello_flutter”) and choose a location where the template should be generated.

Wait until VS Code generates the whole project and you see main.dart file in lib folder:

Open the main.dart file and replace its contents with the following, a bit cleaned-up code:

We won’t focus on the source code here – I hope to dig more in the coming posts Just notice there are quite a few widgets – can you count them all? I found at least 12 different widgets used in this small template code.

Now the best part – having your Android phone connected (you should see it in the right-bottom corner of VS Code) press F5 to run the application. After a few seconds (usually longer for the first time) you should see this beautiful application on your smartphone’s screen:

As soon as you press the “+” button the green counter increments. Yaaaaay!

Debug your Flutter app

Now, try putting a breakpoint in main.dart file at line 30 (beginning of _incrementCounter() function). When you click the “+” button next time, VS Code should stop at the breakpoint:

Try hot reload

The best for the end. As I mentioned before, Flutter lets you use a hot reload. It lets you change the code while running the app and see the changes immediately after saving the source code file. I love it especially because it’s a stateful hot reload, meaning that except UI the state is also reloaded (or rather kept).

With your Flutter app running in debug mode, click the “+” button several times so the counter has value > 0. Then go directly into VS Code and modify line 50 by changing the counter text color from Colors.green to Colors.red. Line 50 should now look as follows:

Save main.dart file by pressing Ctrl+S. Take a look at your smartphone and see the magic:

Notice how the color of number “7” (counter value) changed to red while its value remains untouched. Quite a nice feature for quick development

I noticed that sometimes it doesn’t work that smoothly and you need to restart the app to see the changes. However, it happens only with some bigger code changes. Flutter quite young SDK and tools are still developing quickly so I hope such drawbacks will be eliminated soon.

Summary

Today we’ve seen how easy it is to start working with Flutter. We got familiar with basic Flutter concepts like widgets. We’ve also created our first Flutter app and debugged it. Finally, we’ve seen the very cool hot reload feature in action

For me, Flutter looks promising. After my adventures with Xamarin, which mostly felt like changing Java to C# and Android Studio to Visual Studio, I’m excited to try something fresh and totally different.

I know this was just a simple introduction to Flutter, but there’s more coming! I hope to publish the next articles about Flutter as I continue playing with it. If you’ve ever used Flutter and have some good sources to recommend – let me know in the comments!

Stay tuned!

The post Your First Flutter App in 30 Minutes appeared first on CodeJourney.net.