An in-depth look at Testing in Flutter.

You’ve got to test your code. It’s a given. You’ve got to make sure it works, but like documentation, we programmers tend to write our test cases almost as an afterthought. Some shops, however, dedicate whole departments just to testing. Someone else then tests your code! Flutter offers a whole platform just for testing your code. Let’s take a look at how it’s done.

There’s A Test For That

In every new Flutter project, you‘ll find a directory called, test. In this article, we’re going to look at the test file, widget_test.dart, found in that directory for this particular Flutter project below called, mvc_template. You’ll have access to the Github account for this project. It’s to produce a ‘project template’ involving the MVC design pattern for developers to start their own apps, but that’s another story. …

A dynamic and more adaptive popup menu

I hate Flutter’s popup menu. It’s ugly. It’s a block of white in the corner of the screen. Does it have to be just a square like that slapped on top of the AppBar? It doesn’t look good. It looks amateurish. Why can’t it look more like the menu in the screenshot below on the right-hand side? That’s a little better.

The Clutter of Flutter

Another thing I don’t like about Flutter’s popup menus is the clutter. I hate the ‘Flutter clutter!’ You know what I mean. …

A look into Flutter’s Navigation System

In Flutter, the screens or pages presented to you in a mobile app are called routes. Behind the scenes, while you navigate through the app going from screen to screen, a ‘stack of routes’ is being managed by the StatefulWidget, Navigator. There is an actual class called, Navigator, involved in all this. With this article, we’ll introduce ourselves to this class as well as take a tentative look at Flutter’s navigation system. Subsequent articles on the subject will follow.

I Like Screenshots. Click For Gists.

As always, I prefer using screenshots in my articles over gists to show concepts rather than just show code. I find them easier to work with frankly. However, you can click or tap on these screenshots to see the code in a gist or in Github. Further, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program mostly on our computers — not on our phones. …

An in-depth look at the InheritedWidget

This sample app, counter_app_inherited, is being used in this article to showcase the InheritedWidget. It supplies the simple ‘counter app’ you’ll no doubt recognize whenever you create a new Flutter project. However, in this app, an InheritedWidget is involved in incrementing the counter.

Looking at the screenshot below, the red arrows highlight how the InheritedWidget is being implemented. As always when the ‘floating button’ is pressed, a setState() function is called. However, in this app, it’s a static setState() function defined in the class, BuildInheritedWidget. The traditional expression, _counter++;, is nowhere to be seen, and yet the app does increment successfully. How does that work? Know now that it is in the widget, BuildInheritedWidget, where you’ll find the InheritedWidget, and as you see below, that widget also wraps around the CounterPage widget. Being such a simple example app, this all may look a little strange, but it’s so to truly showcase the InheritedWidget’s capabilities. …

An in-depth look at MediaQuery Widget

It’s been said, many developers learning Flutter first encounter the MediaQuery widget with an error. Something akin to, “MediaQuery.of() called with a context that does not contain a MediaQuery.” For example, these developers were no doubt told to use the static function, of, in the MediaQuery class when they wanted the width and or height of the phone’s screen. However, they did so with a little too much enthusiasm without starting their app up with a MaterialApp widget or a CupertinoApp widget.

The example app, mediaQuery.dart, we’re using, today, in this article is listed below. To demonstrate such an error, I initially didn’t use the class, MyApp, with its MaterialApp widget (first arrow) but merely supplied the widget, _MediaQueryWidget, to Flutter’s runApp() function and ran it. Because of the call MediaQuery.of() function (second arrow), the resulting ‘Red Screen of Dread’ is presented displaying the message, “No MediaQuery widget found.” The last screenshot comes about when the MaterialApp widget is now used listing all the information currently provided by the MediaQuery widget. …

More like State access, no? Conceptual discussion.

As you know, there’s a great number of architectural frameworks offered to Flutter developers to supply some form of State Management to their apps. I even threw in an offering that emulates a time-tested design pattern. However, I won’t promote it here. That would be uncouth.

Back in March of 2018, all I wanted was to get rid of two warning messages that I was always encountering when first learning Flutter. These messages were telling me I was doing something wrong and not optimizing my code to take full advantage of Flutter's unique characteristics. …

An in-depth look at the AppBar widget

Every time you create a new Flutter project, you’re greeted with the proverbial ‘counter app’ with its Scaffold widget. It’s a common widget used with the Material interface design and often uses another common widget, the AppBar. The AppBar is seen as a fixed band (or bar) placed along the top of the screen. It serves as a navigational tool listing along its length a number of pre-defined icons and or text. The user is to tap on these listed items so to generate and present a different screen.

An in-depth look at the BuildContext class

Do you know what that context object is? You know what object I mean, the BuildContext object named, context, that’s passed to the build() function all the time. It’s a necessary parameter to a bunch of static functions as well:

build(BuildContext context)
Theme.of(context)
Scaffold.of(context)
MediaQuery.of(context)
Navigator.of(context)

It helps you go up and or through the ‘render tree’ (or widget tree). In this article, we’ll take a closer look at it. That means, we’re going to look ‘under the hood’ of the Flutter framework and get down to what exactly makes up this BuildContext object named context. That means we’re walking through the code. …