Flutter - Using ExpandIcon Widget Examples

If you have a collapsible part, it's quite common to use an expand icon to trigger the visibility of the collapsible part. In Flutter, you can do it easily using ExpandIcon widget. It's a widget that represents a button that can rotate 180 degrees when pressed. As for the icon, Flutter uses Icons.expand_more.

Using ExpandIcon Widget

Below is the constructor of ExpandIcon.

  const ExpandIcon({
    Key key,
    this.isExpanded = false,
    this.size = 24.0,
    @required this.onPressed,
    this.padding = const EdgeInsets.all(8.0),
    this.color,
    this.disabledColor,
    this.expandedColor,
  })

The only required argument you need to pass is onPressed. However, it's very common to pass a state variable for isExpanded so that you can control whether the icon should be in expanded state or not

Handling On Pressed and Expanded State

When the icon is pressed by the user, Flutter will trigger the callback passed as onPressed in the constructor. The callback has one parameter of type bool which indicates whether it is in expanded state or not. The most common thing to do inside the callback is updating the value of a state variable which is passed as isExpanded argument. Therefore, a press on the icon triggers the callback to be called which updates the value of the state variable. The state variable itself determines how the icon is rendered, whether it should be expanded or not. Below is the basic usage example assuming you have a state variable named _isExpanded.

  ExpandIcon(
    isExpanded: _isExpanded,
    onPressed: (bool isExpanded) {
      setState(() {
        _isExpanded = isExpanded;
      });
    },
  )

Customizing Colors

You can set the color of the icon by passing a Color as color argument. When it is in expanded state, you can set a different color by passing expandedColor argument. If the icon is disabled, you can also set another color passed as disabledColor argument.

  ExpandIcon(
    isExpanded: _isExpanded,
    color: Colors.white,
    expandedColor: Colors.black,
    disabledColor: Colors.grey,
    onPressed: (bool isExpanded) {
      setState(() {
        _isExpanded = isExpanded;
      });
    },
  )

Full Code

Here is a usage example of ExpandIcon in which the icon is used to toggle the visibility of a widget wrapped inside a Visibility widget.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _ExpandIconExample(),
      );
    }
  }
  
  class _ExpandIconExample extends StatefulWidget {
    _ExpandIconExampleState createState() => _ExpandIconExampleState();
  }
  
  class _ExpandIconExampleState extends State<_ExpandIconExample> {
  
    bool _isExpanded;
  
    initState() {
      super.initState();
  
      _isExpanded = false;
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.teal,
              child: Row(
                children: <Widget>[
                  SizedBox(width: 25),
                  Expanded(
                    child: Text(
                      'Woolha.com',
                      style: TextStyle(color: Colors.white, fontSize: 22)
                    ),
                  ),
                  ExpandIcon(
                    isExpanded: _isExpanded,
                    color: Colors.white,
                    expandedColor: Colors.black,
                    disabledColor: Colors.grey,
                    onPressed: (bool isExpanded) {
                      setState(() {
                        _isExpanded = isExpanded;
                      });
                    },
                  ),
                  SizedBox(width: 25),
                ],
              ),
            ),
            Visibility(
              visible: _isExpanded,
              child: Padding(
                padding: EdgeInsets.all(15),
                child: Text('Woolha.com is a blog about programming.'),
              ),
            ),
          ],
        ),
      );
    }
  }
  

Output:

ExpandIcon Properties

• Key key: The widget's key, used to control if it should be replaced.
• bool isExpanded: Whether the icon is in expanded state.
• double size: The size of the icon.
• ValueChanged<bool> onPressed *: A callback function triggered when the icon is pressed.
• Padding padding: The padding around the icon.
• Color color: The color of the icon.
• Color disabledColor: The color of the icon when it is disabled,.
• Color expandedColor: The color of the icon when it is expanded,.

*: required