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

Question

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),
                    ),

Answer 1

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:

Answer 2

That's what the Stack widget is for: to stack widgets on top of each other.

You can play around with the parameters of the Positioned to get your desired output:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        backgroundColor: Colors.red,
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 1000,
      child: Stack(
        alignment: Alignment.centerRight,
        children: [
          // divider
          Divider(
            color: Colors.white,
            thickness: 2,
          ),
          // button
          Positioned(
            right: 50,
            child: FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}