How to create a Flutter UI with a divider and a button positioned between the divider?

I'm working on a Flutter project and need guidance on coding a UI that includes a divider with a button situated between the divider. Could someone provide a code example or share insights on the best approach to achieve this layout in Flutter?

/// DIVIDER
                    // Todo: Button along with Divider
                    const Divider(
                      height: 16,
                      thickness: 2,
                      color: Color(0xffeaecf0),
                    ),

You can use the Stack widget for that!

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Page'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.teal,
            height: 100,
          ),
          Stack(
            alignment: Alignment.centerRight,
            children: [
              const Divider(color: Colors.grey),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.add),
                  style: IconButton.styleFrom(
                    backgroundColor: Colors.white,
                    shape: const CircleBorder(
                      side: BorderSide(
                        color: Colors.grey,
                        width: 2,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Container(
            color: Colors.amber,
            height: 100,
          ),
        ],
      ),
    );
  }

The output will be something like this: