Interactivity and Asset
Learning Outcomes
After completing this lesson you should be able to explain
How to respond to taps in Flutter application
How to create a custom widget
The difference between stateless and stateful widgets
The common approaches used for managing state in Flutter
How to add assets
Adding interactivity to your Flutter app
What we want to achieve
Tapping the star removes its favorited status,
replacing the solid star with an outline and
decreasing the count
Tapping again favorites the lake, drawing a solid
star and increasing the count.
Adding interactivity to your Flutter app
To achieve this goal
We will create a single custom widget that
includes both the star and the count, which are
themselves widgets
Tapping the star changes state for both widgets,
so the same widget should manage both
Stateful and Stateless widgets
A widget is either stateful or stateless
Stateful widget changes state
Checkbox, Radio, Slider, InkWell, Form, and TextField are examples
A stateless widget never changes
Icon, IconButton, and Text are examples
Stateless widgets subclass StatelessWidget
Stateful widgets subclass StatefulWidget
Stateful widgets
A widget’s state is stored in a State object, separating the widget’s state from
its appearance
The state consists of values that can change, for instance
a slider’s current value or
whether a checkbox is checked
When the widget’s state changes, the state object calls setState(), telling
the framework to redraw the widget
Creating a stateful widget
A stateful widget is implemented by two classes
a subclass of StatefulWidget and
a subclass of State
The state class contains the widget’s mutable state and the widget’s build()
method
Creating a stateful widget
Let us see how to build a stateful widget, called FavoriteWidget
Step 1: Decide which object manages the widget’s state
A widget’s state can be managed in several ways
In this example, toggling the star is an isolated action that doesn’t affect
the parent widget or the rest of the UI
Therefore, FavoriteWidget itself can manage its own state internally
Creating a stateful widget
Step 2: Subclass StatefulWidget
The FavoriteWidget class manages its own state, so it overrides
createState() to create a State object
The framework calls createState() when it wants to build the widget.
createState() returns an instance of _FavoriteWidgetState
Creating a stateful widget
Step 2: Subclass StatefulWidget
class FavoriteWidget extends StatefulWidget {
@override
_FavoriteWidgetState createState() =>
_FavoriteWidgetState();
}
Creating a stateful widget
Step 3: Subclass State
class _FavoriteWidgetState extends State<FavoriteWidget>
{
bool _isFavorited = true;
int _favoriteCount = 41;
// ···
}
The _FavoriteWidgetState class stores the mutable data that can change
over the lifetime of the widget
Creating a stateful widget
Step 3: Subclass State
The _FavoriteWidgetState class also defines a build() method, which
creates a row containing a red IconButton, and Text
The build() method is shown in the next slide
Creating a stateful widget
class _FavoriteWidgetState extends State<FavoriteWidget> {
// ···
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(
icon: (_isFavorited ? Icon(Icons.star):Icon(Icons.star_border)),
color: Colors.red[500],
onPressed: _toggleFavorite,
),
Text('$_favoriteCount'),
], The _toggleFavorite() method is
); shown in the next slide
}
}
Creating a stateful widget
void _toggleFavorite() { This method is called when the
setState(() { IconButton is pressed
if (_isFavorited) {
Calling setState() tells the
_favoriteCount -= 1;
framework that the widget’s state
_isFavorited = false;
has changed and that the widget
} else {
should be redrawn
_favoriteCount += 1;
_isFavorited = true; The function argument to
} setState() toggles the UI
}); between the states highlighted in
} yellow
Managing state
Who manages the stateful widget’s state?
The widget itself?
The parent widget?
Both?
Another object?
Managing state
Keep in mind the following principles while deciding which approach to use
The parent should manage the state If the state in question is user data,
for example the checked or unchecked mode of a checkbox, or the
position of a slider
The widget itself should manage the state If the state in question is
aesthetic, for example an animation
If in doubt, start by managing state in the parent widget
Managing state: Example
Consider an application which has a star icon that, when
tapped, toggles between a solid or outline star
The _favorite boolean variable determines the icon type:
solid when _favorite is true or outline if false
We will have three versions of an application called
ToggleFavorite to explore the three state management
approaches
The widget manages its own state
Stateful Widget class
class ToggleFavorite extends StatefulWidget {
@override
_ToggleFavoriteState createState() {
return _ToggleFavoriteState();
}
}
The widget manages its own state
The state class
class _ToggleFavoriteState extends State<ToggleFavorite> {
bool _favorite = true;
// ...
}
Here the _favorite variable holds the state internally
The widget manages its own state
The build method
@override
Widget build(BuildContext context) {
return IconButton(
iconSize: 100.0,
icon: _favorite ? Icon(Icons.star) : Icon(Icons.star_border),
onPressed: _handlePress,
);
}
The widget manages its own state
The _handlePress method
_handlePress() {
setState(() {
_favorite = !_favorite;
});
}
The parent widget manages the widget’s state
The parent stateful widget class
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() {
return _ParentWidgetState();
}
}
The parent widget manages the widget’s state
The parent state class
class _ParentWidgetState extends State<ParentWidget> {
bool _favorite = true;
// ...
}
The parent widget manages the widget’s state
The build method
@override
Widget build(BuildContext context) {
return ToggleFavorite(
favorite: _favorite,
onChanged: _handleToggle,
);
}
Notice the highlighted child widget
The state and a callback function are passed as a constructor
argument to the child widget ToggleFavorite
The parent widget manages the widget’s state
The _handleToggle method
_handleToggle(bool newValue) {
setState(() {
_favorite = newValue;
});
}
Notice that _handleToggle accepts an argument
The parent widget manages the widget’s state
The child stateless widget class - ToggleFavorite
class ToggleFavorite extends StatelessWidget {
ToggleFavorite({this.favorite = false, this.onChanged});
final bool favorite;
final Function onChanged;
// ... Notice how the favorite an onChanged fields are
} initialized by the constructor
ValueChanged is a callback type which report when
value changes
The parent widget manages the widget’s state
The child stateless widget class - build method
@override
Widget build(BuildContext context) {
return IconButton(
iconSize: 100.0,
icon: favorite ? Icon(Icons.star) : Icon(Icons.star_border),
onPressed: _handlePress,
);
}
Now the state of favorite is managed
at the parent widget
The parent widget manages the widget’s state
The child stateless widget class - _handlePress method
_handlePress() {
onChanged(!favorite);
}
_handlePress calles a callback function onChange
that was passed to its class from the parent
A mix-and-match approach
In this scenario, the stateful widget manages some of the state, and the
parent widget manages other aspects of the state
Exercise:
Combine the previous two state management approaches
Let the parent widget manage the toggle state
Add a color state for the icon which changes together with the icon types
ToggleFavorite widget should manage the color state
Widgets with built in interactivity
Standard widgets Material Components
Form FloatingActionButton
FormField IconButton
Material Components
Radio
Checkbox
ElevatedButton
DropdownButton
Slider
TextButton
Switch
TextField
Adding assets
An asset is a file that is bundled and deployed with your app, and is
accessible at runtime
Common types of assets include
static data (for example, JSON files),
configuration files,
icons, and
images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP)
Specifying assets
Flutter uses the pubspec.yaml file, located at the
root of your project, to identify assets required by
an app
flutter:
assets:
- assets/my_icon.png
- assets/background.png
Specifying assets
To include all assets under a directory, specify the
directory name with the / character at the end:
flutter:
Assets:
- directory/
- directory/subdirectory/
Asset bundling
The assets subsection of the flutter section specifies files that should be
included with the app
During a build, Flutter places assets into a special archive called the asset
bundle that apps read from at runtime
Asset variants
Refers to different versions of an asset that might be displayed in different
contexts
When an asset’s path is specified in the assets section of pubspec.yaml, the
build process looks for any files with the same name in adjacent
subdirectories and include them in the asset bundle
Flutter uses asset variants when choosing resolution-appropriate images
Asset variants
Let us assume you have the following files in your application directory:
.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc
Asset variants
And your pubspec.yaml file contains the following
flutter:
assets:
Main Asset
- graphics/background.png
Then both graphics/background.png and
graphics/dark/background.png are included in your
asset bundle
Variant
Asset variants
If your pubspec.yaml file contains the following
flutter:
assets:
- graphics/
Then the graphics/my_icon.png, graphics/background.png and
graphics/dark/background.png files are included in the asset bundle
Loading assets
Your app can access its assets through an AssetBundle object
Below are the two main methods that are available in AssetBundle for
loading string/text asset or an image/binary asset
loadString()
load()
You can us a logical key to access the assets
The logical key maps to the path to the asset specified in the pubspec.yaml
file at build time
Loading text assets
Each Flutter app has a rootBundle object for easy access to the main asset
bundle
It is possible to load assets directly using the rootBundle global static from
package:flutter/services.dart
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
Loading text assets
However, it’s recommended to obtain the AssetBundle for the current
BuildContext using DefaultAssetBundle
This approach enables a parent widget to substitute a different AssetBundle
at runtime, which can be useful for localization or testing scenarios
Typically, you’ll use DefaultAssetBundle.of() to indirectly load an asset
Loading images
Flutter can load resolution-appropriate images for the current device pixel
ratio
Declaring resolution-aware image assets
AssetImage understands how to map a logical requested asset onto one
that most closely matches the current device pixel ratio
Assets should be arranged according to a particular directory structure so
that AssetImage use the appropriate image for the current device pixel
ratio
Loading images
To load an image, you can use the AssetImage class in a widget’s build()
method
Widget build(BuildContext context) {
return Image(image: AssetImage('graphics/background.png'));
}
Platform assets
Updating the app icon for Android
In your Flutter project’s root directory, navigate to
.../android/app/src/main/res
The various bitmap resource folders such as mipmap-hdpi
already contain placeholder images named ic_launcher.png
Replace them with your desired assets respecting the
recommended icon size per screen density
Platform assets
Updating the app icon for Android
Platform assets
Updating the app icon for iOS
In your Flutter project’s root directory, navigate to
.../ios/Runner
The Assets.xcassets/AppIcon.appiconset directory already
contains placeholder images
Replace them with the appropriately sized images as indicated by
their filename
Platform assets
Updating the app icon for iOS
