Revision history [back]

To make a floating widget background in Flutter/Dart, you can follow these steps:

1. Create a scaffold widget and add a stack widget to it.

Scaffold(
  body: Stack(
    children: [
      // Your widgets here
    ],
  ),
);

1. Add a container widget to the stack and give it a color.

Scaffold(
  body: Stack(
    children: [
      Container(
        color: Colors.blue.withOpacity(0.5),
      ),
      // Your widgets here
    ],
  ),
);

1. Make the container widget as tall as the screen height by using MediaQuery.

Scaffold(
  body: Stack(
    children: [
      Container(
        height: MediaQuery.of(context).size.height,
        color: Colors.blue.withOpacity(0.5),
      ),
      // Your widgets here
    ],
  ),
);

1. Use the positioned widget to place your other widgets on top of the container.

Scaffold(
  body: Stack(
    children: [
      Container(
        height: MediaQuery.of(context).size.height,
        color: Colors.blue.withOpacity(0.5),
      ),
      Positioned(
        top: 100,
        left: 50,
        child: Text("Hello World"),
      ),
    ],
  ),
);

1. Finally, make the positioned widget transparent by giving it a transparent color.

Scaffold(
  body: Stack(
    children: [
      Container(
        height: MediaQuery.of(context).size.height,
        color: Colors.blue.withOpacity(0.5),
      ),
      Positioned(
        top: 100,
        left: 50,
        child: Container(
          color: Colors.transparent,
          child: Text("Hello World"),
        ),
      ),
    ],
  ),
);

By following these steps, you can create a floating widget background in Flutter/Dart.