Mastering Overlay Widgets in Flutter: A Step-by-Step Guide

What is an Overlay Widget?

An Overlay widget is a powerful tool that allows you to display visual elements on top of other widgets. It’s similar to a Stack widget, but with more flexibility and customization options. With an Overlay widget, you can insert a widget into the overlay, position it using Positioned or AnimatedPositioned, and even apply transformations.

Example 1: Displaying an Error Message on a Sign-up Screen

Let’s start with a simple example. Suppose you have a sign-up screen with a form that requires users to enter their name, email address, password, and confirmation password. You want to display an error message when the user enters invalid information. Using an Overlay widget, you can display a red icon next to the text field with the error, and show a brief error message when the user clicks on the icon.

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  void _showOverlay() {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
        top: 100,
        left: 100,
        child: Container(
          width: 200,
          height: 50,
          color: Colors.red,
          child: Text('Error message'),
        ),
      );
    });
    overlayState.insert(overlayEntry);
  }
}

Example 2: A Floating Action Button with Options

In this example, we’ll create a floating action button with three options. When the user clicks on the button, the options will appear above the button.

class FloatingActionButtonExample extends StatefulWidget {
  @override
  _FloatingActionButtonExampleState createState() =>
      _FloatingActionButtonExampleState();
}

class _FloatingActionButtonExampleState extends State<FloatingActionButtonExample> {
  final _animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );

  void _showOverlay() {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
        bottom: 100,
        right: 100,
        child: Container(
          width: 200,
          height: 150,
          color: Colors.white,
          child: Column(
            children: [
              ListTile(title: Text('Option 1')),
              ListTile(title: Text('Option 2')),
              ListTile(title: Text('Option 3')),
            ],
          ),
        ),
      );
    });
    overlayState.insert(overlayEntry);
  }
}

Example 3: An Overlay that Follows a Text Field

In this example, we’ll create an overlay that follows a text field. When the user clicks on the text field, the overlay will appear above the text field.

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State<TextFieldExample> {
  final _focusNode = FocusNode();

  void _showOverlay() {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
        top: 100,
        left: 100,
        child: Container(
          width: 200,
          height: 50,
          color: Colors.white,
          child: Text('Overlay content'),
        ),
      );
    });
    overlayState.insert(overlayEntry);
  }

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        _showOverlay();
      } else {
        // Remove the overlay when the text field loses focus
      }
    });
  }
}

These examples demonstrate the power and flexibility of the Overlay widget in Flutter. By using overlays, you can create visually appealing and user-friendly interfaces that enhance the user experience of your app.