Animating icons with Flutter AnimatedIcon

Share this post

Flutter supports a number of Material Design animated icons that are built-in and can be used with minimal effort. The AnimatedIcon class works almost like the Icon class but requires an AnimationController.

I’m going to show you how to animate an icon using a button and reset the same animation to its beginning state using another button. Just keep in mind that you can, of course, trigger the animation any other way you want. This will be our end result:

First of all we need a Stateful widget that uses SingleTickerProviderStateMixin and create an instance of AnimationController:

class _AnimatedIconPageState extends State<AnimatedIconPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

And we should override initState with the following code:

@override
  void initState() {
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: Duration(seconds: 1), // how long should the animation take to finish
    );
    super.initState();
  }

And we dispose of our animation like so:

@override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

Wherever we want to have our animated icon (one of these), we just call this:

AnimatedIcon(
  icon: AnimatedIcons.list_view, // one of the available animated icons
  progress: _controller, // this is our AnimationController
  color: Colors.blue,
),

There are a lot of possibilities with AnimationController, but today I just want to keep it simple and stick to the possible uses within the AnimatedIcon context. To start our animation we can call:

_controller.forward()

After calling forward the animation stops in its last state. If we would want to run the animation from the end to beginning again, we can call:

_controller.reverse()

Or we can just reset it to the beginning state:

_controller.reset()

So, after all the steps this is the code that we have:

class AnimatedIconPage extends StatefulWidget {
  AnimatedIconPage({Key key}) : super(key: key);

  @override
  _AnimatedIconPageState createState() => _AnimatedIconPageState();
}

class _AnimatedIconPageState extends State<AnimatedIconPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: Duration(seconds: 1),
    );

    super.initState();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedIcon"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedIcon(
              icon: AnimatedIcons.list_view,
              progress: _controller,
              color: Colors.blue,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                FlatButton(
                  onPressed: () => _controller.forward(),
                  child: Text('Animate'),
                ),
                FlatButton(
                  onPressed: () => _controller.reset(),
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

There are a lot more custom and advanced uses of animation of Flutter, but if you just want to do a common animation that is already part of Material Design, then AnimatedIcon is a great widget to use.

In my future posts, I will show more things that we can do with animation in Flutter.

Flutter run: No connected devices

Share this post

One of the first problems new Flutter users might come across is the fact that after running flutter run command an error appears saying that there are no connected devices. The error looks like this:

No supported devices connected.

The reason for this error is that after installing Flutter and being able to run the flutter commands, we still need to have some kind of device running. That could be either a physical device or an emulator like an iOS simulator or an Android emulator.

Open the iOS simulator

Using the terminal

In macOS, you can easily open the iOS simulator by typing open -a simulator in your terminal. Obviously you need to have Xcode installed. This command will by default open a simulator with the latest version of iOS that you have installed on your system.

Using Visual Studio Code

Visual Studio Code has great support for Flutter and I would definitely recommend you to use it, especially if you are developing for both Android and iOS. To easily access devices in VS Code, you need to download Dart and Flutter extensions. You either follow the links or just search for them in the extensions menu.

Once you installed those extensions you can now find and open the devices that are available on your system directly from within Visual Studio Code. Just follow these steps:

  • Open the Flutter project that you created with flutter create
  • Click on No Device button in the bottom toolbar in VS Code.
VS Code bottom toolbar
  • A list will open letting you choose which device you want
VS Code device list

Open an Android Emulator

To be able to develop for Android with Flutter and getting everything you need, you must install Android Studio first. You can then install any emulator you want to test different versions of Android.

Using the terminal

For this, you can follow this link which explains it in detail. In order for emulator command to work, you should follow this excellent explanation on how to do it.

Using Visual Studio Code

After installing Android Studio you should be able to follow the iOS instructions above and you’re good to go.

How to implement dropdown lists in Flutter

Share this post

To use dropdown lists we can use the DropdownButton class in Flutter. DropdownButton requires a type for the items on the list. For instance, if we would have a list of Strings then we have to define that when setting up the list.

The reason that the widget is called a DropdownButton and not DropdownList, is because it actually is a clickable widget that shows the currently chose item as a text. Also, it can be pretty much styled like a button.

To create a dropdown list in Flutter we can use the following code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

The result will be the following:

DropdownButton

We can easily customize the DropdownButton by styling the underline by defining a widget.

How to remove the underline from Flutter DropdownButton

To remove the underline from the DropdownButton, we need to define it as an empty Container widget. Like so:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(), // this is the magic
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

It then looks like this:

DropdownButton without an underline

How to add a custom icon to Flutter DropdownButton

What if we want to add a custom icon to the DropdownButton? Well, that’s quite easy as this widget is actually a button.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(
                // underline can be styled as well
                // height: 4.0,
                // color: Colors.blue,
                ), // this removes underline
            icon: Icon(Icons.arrow_downward),
            iconSize: 20.0, // can be changed, default: 24.0
            iconEnabledColor: Colors.blue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

We added a custom icon and color and this is how it looks like now:

DropdownButton with custom icon

I hope you’re comfortable using dropdown lists in Flutter now. If you have any questions, then please let me know in the comment section. Have fun with Flutter!