flutter – Stack positioned

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.purple),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEDEAE0),
      appBar: AppBar(
          title: const Text("Flutter - Stack Positioned")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Stack(
      children: [
        Center(
            child:  Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.black87
              ),
            )
        ),
        Positioned(
            right: 10,
            top: 10,
            child:  Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.blue
              ),
            )
        ),
        Positioned(
            bottom: 10,
            right: 10,
            child:  Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.red
              ),
            )
        ),
        Positioned(
            left: 10,
            top: 10,
            child:  Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.green
              ),
            )
        ),
        Positioned(
            left: 10,
            bottom: 10,
            child:  Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.cyan
              ),
            )
        ),
      ],
    );
  }
}

More flutter tutorials

• flutter – InkWell rounded
• flutter – Stack center
• flutter – Stack alignment
• flutter – Stack clipBehavior
• flutter – Indeterminate LinearProgressIndicator
• flutter – LinearProgressIndicator value color
• flutter – LinearProgressIndicator rounded
• flutter – How to disable Button
• flutter – How to use ToggleButtons
• flutter – How to change ToggleButtons color
• flutter – Checkbox size
• flutter – CheckboxListTile example
• flutter – CheckboxListTile border color
• flutter – PageView example
• flutter – PageView disable swipe