Theme and ThemeData

The Theme widget applies a theme to its child widgets. This includes colors and typographic settings.

When we looked at the MaterialApp widget, you saw that it has a theme property that can be used to declare the theme to apply for the entire application. Where the Theme widget comes into play is typically when you want to override that application-level theme for just some subset of widgets. Alternatively, you could just wrap the entire application’s widget tree in a Theme widget and apply the theme that way, but that’s not usually done in favor of the theme property of MaterialApp.

The Theme.of() method is basically how you say “hey, Flutter, what’s the nearest theme to this widget?” Whatever parent widget has a theme is the theme it will find (and remember: even if you don’t explicitly define a theme anywhere there’s a default theme automatically that will be found). This method returns a ThemeData object, which has a copyWith() method. This method returns a new ThemeData object but with whatever properties you pass to it overriding what was in it before. Here, we’re making the accentColor property of the new ThemeData use Colors.red, overriding whatever it was before. Now, all widgets underneath this Theme widget will have a red accent color regardless of what any other widgets in the app have.

No need to get the parent ThemeData; you just create a new instance and define the properties you want. There are many properties supported by ThemeData, far too many to list here, so you’ll need to refer to the Flutter documentation to see which you want to define.

Remember the key point: since the Container here is wrapped in a Theme, Theme.of(context) will return that theme’s ThemeData; if the Container was not wrapped in a Theme, then the application-level ThemeData for the Theme specified in the theme property of the MaterialApp widget would be used; if no theme was specified on the MaterialApp, then a default Theme and ThemeData would be built under the covers and used by default.

Opacity

When you rerun it, you’ll see that the text is now semi-transparent (or to state it another way: 25% opaque). There’s not much more to it than this!

DecoratedBox

The DecoratedBox widget is exactly what it says: a box, which is decorated! More conceptually, it paints a decoration onto another box-like container widget that is a child of the DecoratedBox. Going along with DecoratedBox, nearly always, is the BoxDecoration widget, which defines the decoration you want.

Here, we wrap a DecoratedBox around a Container that is parent to a Text widget. On its own, the DecoratedBox won’t display anything; that’s where its child comes in. We need to give it a box to decorate, and that’s what the Container is for. The Text inside it is just an added bonus to show that it’s the Container being decorated and not the Text itself.

Now, how it’s being decorated is where the decoration property comes into play, and its value is an instance of BoxDecoration. The BoxDecoration widget provides a way to decorate with colors, or with images (to have a background image applied to the Container behind the Text, for example) or play with the borders (rounded corners, for example) and apply shadows and gradients, the latter of which is shown here. The LinearGradient is one of several gradient classes (in addition to RadialGradient and SweepGradient) that take a position in the box to begin and end the gradient (conveniently specified with the Alignment class constants) and the colors to use and how to repeat the gradient if needed based on the size of the box.

DecoratedBox, combined with BoxDecoration, is a handy and flexible way to add styling to any container element as your needs require.

Transform

That rotates and skews a red box with a yellow background that has some text in it while keeping the bottom left corner of the box pinned to its original location. It may not be an especially useful example, but it begins to hint at the sort of power this widget provides if you are familiar with matrix transformations.

In addition to this constructor , there is also Transform.rotate(), Transform.scale(), and Transform.translate() which each returns a Transform widget specifically configured for the three most common types of transformations, namely, rotations, scaling, and translations. These are considerably easier to use since they don’t require you to know matrix operations (they take a simple subset of arguments that is less math-y, if you will), so if you need one of these common transformation types, I highly recommend using them instead of the Transform() constructor.

AnimatedContainer

For relatively simple animations, the AnimatedContainer widget is perfect. It gradually changes its values over a defined period of time. It does this automatically – you just tell it what the starting values are, then change to the new values and it will animate (or tween) between them as required.

Here, we’ve got an AnimatedContainer with its duration property set to one second so that’s how long the animation will take. We set the initial color, width, and height properties to the values of the variables defined in the State. Then, when the user clicks the RaisedButton, the values of all three variables are changed and setState() is called, which triggers the rebuild, but now Flutter will do so over one second of time, gradually making the AnimatedContainer bigger and gradually changing it to red.

You’ll also find a DecoratedBoxTransition which can be used to animate the various properties of a DecoratedBox, so it’s conceptually pretty similar to AnimatedContainer, but for a specific target widget.

AnimatedCrossFade

First, this is the first time you’ve seen the FlutterLogo widget . As I’m sure you can guess, this is one that displays the Flutter widget with various stylings. You don’t need to add it as a resource or anything like that, it’s just there automatically for you to use.

Now, here, we embed two of them inside an AnimatedCrossFade widget by setting the firstChild and secondChild properties to instances of FlutterLogo. Like AnimatedContainer, this widget has a duration property too, which is set to two seconds here.

The crossFadeState property is what matters most: it tells the widget which of the two widgets to show. When set to the value of CrossFadeState.showFirst, it shows the first. Otherwise, it shows the second when the value is CrossFadeState.showSecond. This is based on the value of the boolean _showFirst variable, which starts out true, so the first image appears but then gets set to false when the RaisedButton is clicked, and voila, we have ourselves a cross-fade!

Note that there is also a FadeTransition that animates the opacity of an element. You could build your own AnimatedCrossFade with two FadeTransition widgets working simultaneously if you wanted (which, while I haven’t checked, I’d be willing to bet is exactly how AnimatedCrossFade is implemented).

AnimatedDefaultTextStyle

Here, the Text that is the child of the AnimatedDefaultTextStyle is enlarged 100% and its color changed over the course of one second. By this point I’m going to assume that not much needs to be explained here given how similar these last three widgets have been.

A Few Others: AnimatedOpacity, AnimatedPositioned, PositionedTransition, SlideTransition, AnimatedSize, ScaleTransition, SizeTransition, and RotationTransition

I’m going to save some space here and just mention without showing examples that in addition to the widgets you’ve seen in this section, there are a few others, as you can see in the heading. These can be used just like the others to animate the opacity of an element, or the position of an element, the size of an element, or the rotation of an element.

Note that the AnimatedOpacity widget should be used sparingly because opacity animation is a relatively expensive operation (this would apply to the AnimatedCrossFade and FadeTransition widgets too).

Also note that the AnimatedPositioned widget only works if the child is an element of a Stack, which is a widget we never discussed explicitly. In brief, it allows you to display several children overlapped over one another (whether they are the same size or not, meaning that if a larger element is beneath a smaller one then the larger element can “peek out” from behind the smaller one on top, at least partially). You’ll definitely be seeing the stack again in later chapters, but understand that it’s not the same as the navigator stack that you saw earlier. They are two separate concepts. The Stack widget is just a container for other elements that can be on top of each other.

An interesting note about the *Transition widgets is that they all support physics, which allows you to have animations that aren’t purely linear. This is true to varying degrees for the Animated* widgets , but the support for it in the *Transition widgets tends to be a bit more robust, which means you can get more exciting animations.

Table

The Table widget is perhaps the simplest of what I term “data views,” that is, widgets used to display a collection of data. If you’re familiar with an HTML table, then you already have a basic idea what the Table widget is all about: displaying elements in an organization of rows and columns. Look at the sample code in Listing 4-2 and the result in Figure 4-2.

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget  {

  Widget build(BuildContext inContext) {

    return MaterialApp(home : Scaffold(

      body : Column(children : [

        Container(height : 100),

        Table(

          border : TableBorder(

            top : BorderSide(width : 2),

            bottom : BorderSide(width : 2),

            left : BorderSide(width : 2),

            right : BorderSide(width : 2)

          ),

          children : [

            TableRow(

              children : [

                Center(child : Padding(

                  padding : EdgeInsets.all(10),

                  child : Text("1"))

                ),

                Center(child : Padding(

                  padding :  EdgeInsets.all(10),

                  child : Text("2"))

                ),

                Center(child : Padding(

                  padding :  EdgeInsets.all(10),

                  child : Text("3"))

                )

              ]

            )

          ]

        )

      ])

    ));

  }

}

Listing 4-2

Setting the table with the Table widget

It’s straightforward, right? You can optionally define the border of the Table , but by default, it will have none. Then, you just need to supply some rows via children, which can be any widget or widget tree you like but it must at the top be an instance of TableRow, and the children of each is a cell, or column, in the row. Every row in a Table must have the same number of children. You can manually set the widths of the columns with the columnWidths property, and you can adjust the vertical alignment of content in each cell with the defaultVerticalAlignment property.

DataTable

In simplest terms, a DataTable requires that you tell it what the columns in the table are and then of course what the data rows to display are. Each column is defined via a DataColumn instance while each row is defined with a DataRow instance which contains a collection of cells whose members are DataCell instances. Although not required, you can supply the sortColumnIndex property to indicate which column the data is currently sorted by. Note that this is just a visual indicator though – your code is responsible for physically sorting the data (you most of the time won’t supply the data inline as in this example; you’ll instead have some function that produces the list, and that’s the natural place to sort the data as well). You can see most of this in Figure 4-3.

A DataColumn can supply a tooltip property to show some descriptive text when the column is long-pressed, and a DataCell can include a showEditIcon property that, when true, shows a little pencil icon to indicate the cell can be edited. The actual editing must be supplied by your code, however.

Note that a DataTable is a somewhat expensive widget computationally owing to the layout process it must implement. Therefore, if you have a lot of data to display it is recommended that you use the PaginatedeDataTable widget instead. It works much like DataTable does, but it splits the data into pages that the user can move between. That way, it only has to lay one page at a time, which is less expensive.

GridView

This produces a layout, shown in Figure 4-4, with a fixed number of elements (called tiles) in the cross axis. Others include GridView.extent(), which produces a layout with tiles that have a maximum cross-axis extent. You can also use the GridView.builder() constructor if you have an “infinite” number of tiles to display.

Note that GridView is very much like ListView, which in a sense is a purely linear GridView (we’ll be looking at ListView shortly).

ListView and ListTile

The children of ListView can be anything you like, but frequently you will use a ListTile widget (several of them, to be more precise). ListTile is a widget that is a single fixed-height row that contains some text and a leading or trailing icon. ListTile can show up to three lines of text, including a subtitle. In the example, the leading property is used to show an Icon before the text, which you can see in Figure 4-5.

The ListView can scroll vertically or horizontally depending on the setting of its scrollDirection property. You can even adjust the way the ListView handles scrolling by adjusting the physics property, which is an instance of ScrollPhysics.

ListView supplies a couple of different constructors, with the default one shown in the example. There is also a ListView.builder() constructor that uses a builder function to render the rows. ListView.separated() is also available, and this will provide you a ListView with items separated by list separators you define. The ListView.custom() constructor allows you more flexibility in setting the child model to make the ListView look and work in pretty much any way you want.

There is also the PageView widget, which is a ListView that supports pagination. This is a good choice if you have many items that you want to ensure are displayed with good performance, but more importantly, that is logical to break into groupings in some way where each grouping becomes a page.

CircularProgressIndicator (CupertinoActivityIndicator) and LinearProgressIndicator

Yep, in simplest terms, that’s all it takes! Flutter handles everything else for you. Now, there are of course some options that will be of interest to you. First, strokeWidth allows you to determine how thick the circle is. The backgroundColor property lets you set a different color behind the indicator. Finally, valueColor allows you to define the color of the circle itself. Unfortunately, it’s not as simple as setting a color from the Colors class. No, you have to provide an instance of the Animation class or one of its descendants. Almost always, it will be the AlwaysStoppedAnimation class, which has a constructor that accepts a color, so it winds up not being that much more difficult.

For iOS, there is a corresponding CupertinoActivityIndicator which looks and works much the same. To use it, you’ll need to import package:flutter/cupertino.dart, which is true of all the Cupertino widgets. Plus, it doesn’t have quite the same degree of flexibility: it only has a radius property to define how big it is – no color options are present.

Here, value is a number between zero and one that determines how much progress has been made and hence how much of the bar is colored. The backgroundColor is the color of the portion of the bar corresponding to remaining progress while the value of valueColor (which like CircularProgressIndicator takes an instance of an Animation as a value) is the portion that has completed. So, in the example, 75% of the bar would be colored yellow while 25% of it would be colored whatever the default color of the theme is since there is no valueColor specified.

Icon

The Icons class contains a list of Material icons for your use, quite a lot of them in fact. However, you can also add your own. As it happens, these are implemented via fonts, and you can add custom fonts if you want other icons (the popular Font Awesome icon collection, for example).

That specifies that we want version 8.4.0 of the font_awesome_flutter plugin or higher, if a higher version is available (if you aren’t familiar with semantic versioning, then a quick Google search will get you up to speed in no time – it’s pretty simple, so if it’s new to you, don’t worry because it’s easy to pick up but is also beyond the scope of this book). Information on this plugin can be found at https://pub.dartlang.org/packages , and you can find many other useful plugins in this repository, all which get added the same way. This won’t be the last plugin we see used in this book.

You’ll then need to tell Android Studio to get dependencies, which it will automatically show a prompt bar for above the editor when it recognizes that pubspec.yaml has changed. Click Packages Get and the dependencies will be downloaded. This includes the necessary TTF file and some extra code.

It makes it just as easy as using the built-in Material icons, but now you have way more icons to choose from thanks to Font Awesome and this plugin!

We’ll look at pubspec.yaml as necessary as we forge on, but this serves as a good first introduction to it showing you some of the options it provides you and your Flutter projects.

Image

Along the same lines as the Icon widget is the Image widget , which as I’m sure you can guess is used to display an image of some sort. This widget offers several different constructors, each for fetching an image from a different location. I’m only going to talk about two of them though because they are the most common in my experience: Image.asset() to load an image from the app itself and Image.network() to load it from a network location.

Every asset you want to include must be declared in this section. Otherwise, the Flutter SDK won’t know to include it. You could also do - img/ to include everything under the img directory. But, note that only files directly under img/ would be included – anything in subdirectories of img/ would not be (you would have to add an entry for each subdirectory).

Also tangential but worth knowing: When a build is done, the Flutter SDK creates a special archive that goes along with your app called the asset bundle. You can read from this at runtime, as shown by the settings.json example (and, obviously, Image.asset() is doing so under the covers).

Yep, that’s it! Assuming the device has connectivity, the image will be loaded and displayed just as if it were bundled with the application (albeit perhaps a little slower, given intrinsic network latency).

Chip

A Chip is small visual elements that are typically meant to display attributes of things, or small text, or to represent entities like users or quick actions the user can take.

A typical usage is to show a small element representing the current user, perhaps next to their name on a details page. A simple example might be what’s shown in Listing 4-6 and shown in Figure 4-6.

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget  {

  @override

  Widget build(BuildContext inContext) {

    return MaterialApp(home : Scaffold(

      body : Center(child :

        Chip(

          avatar : CircleAvatar(

            backgroundImage : AssetImage("img/ron.jpg")

          ),

          backgroundColor : Colors.grey.shade300,

          label : Text("Frank Zammetti")

        )

      )

    ));

  }

}

Listing 4-6

A simple Chip

The avatar property is optional and usually shows either an image or the initials of the user. This property takes a value that is itself a Widget, so in theory, you could put anything you want here. In this case, I’m using a CircleAvatar widget , which is common for this use case. It can show images or text (typically a person’s initials when the Chip represents a person) or can itself contain child widgets. In this case, I’ve used the same image as for the previous Image example to show a little picture of me. The backgroundColor property , of course, is the color of the chip, and the label property is the text to display next to the avatar image (or alone, if no avatar property is specified).

If you add an onDeleted property , then the Chip will include a delete button for deleting the entity it represents. You’ll need to provide a function to implement the delete though as this is purely a visual addition to the Chip.

FloatingActionButton

The FloatingActionButton widget is one that is very common on Android devices, somewhat less so on iOS devices. It’s a round button that floats above the main content and provides the user quick access to some primary function. For example, it might be the button that triggers the appointment add screen in a calendar app.

Usually, the child of the FloatingActionButton will be an Icon, as you can see in Figure 4-7, though there’s nothing that says it must be.

The backgroundColor property makes the button itself whatever color you like, and foregroundColor makes the icon or text on the button the specified color. The onPressed property is optional and if not specified will make the button disabled and unresponsive to touch. That isn’t usually much good though so you’ll need to define a function to implement whatever the functionality for the button should be.

You can also adjust the shadow via the elevation property, and you can even make the button square by setting the shape property to an instance of a RoundedRectangleBorder widget, among other tweaks its properties allow for.

PopupMenuButton

I’m gonna go out on a limb here and say you probably know what this looks like without seeing a screenshot! The PopupMenuButton widget uses the builder pattern previously discussed to construct a list of PopupMenuItem widgets. These widgets can have any child you deem appropriate, but most commonly it’s just a Text widget. You associate a value with each item, and then your onSelected function is passed that value and is responsible for what each does (here it’s just print()’d to the console).

Some of the other properties supported included the ability to pre-select an item with the initialValue property, the ability to react to the user canceling without selecting an item by supplying a function to the onCanceled property, and adjusting the shadow with the elevation property and play with the padding via the padding property.

Core Flutter Framework Libraries

The core Flutter framework libraries provide most of the basic functionality of Flutter. Much of this is used internally by the widgets themselves, and so you may find that you don’t have cause to use all that much of this directly. Indeed, some of it you will though of course, so let’s have a look.

Note that you must import these to use them, and the import syntax to use is package:flutter/<library-name>.dart.

Dart Libraries

The Dart libraries are provided by Dart itself. To import these, you use the import form dart:<library-name>.dart.

Other (Support) Libraries

Finally, we have just a couple of other/support libraries. There are, of course, more than just two, but they get pretty special-purpose pretty fast, so I think just talking about these few will mostly be sufficient.