How to make relative layout in flutter app

Question

Please see this image - https://ibb.co/YpjJsLZ

In above image how can I place burger image to center of white view. I tried using Align & Center widget but its no fitting properly.

How can relative layout works in flutter?

Answer 1

Flutter does not have layout types like android,

But you can place burger image using stack widget.

You can follow this tutorial for reference.

Answer 2

you can not use Relative Layout in Flutter but it Replace using "Stack".

The stack is a widget in Flutter that contains a list of widgets and positions them on top of the other.

stack allows developers to overlap multiple widgets into a single screen and renders them from bottom to top.

Hence, the first widget is the bottommost item, and the last widget is the topmost item.

import 'package:flutter/material.dart';

class StackWidget extends StatefulWidget {
  @override
  _StackWidgetState createState() => _StackWidgetState();
}

class _StackWidgetState extends State<StackWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.yellow,
      height: 300,
      child: Stack(
        alignment: Alignment.topLeft,
        children: [
          Container(
            color: Colors.cyan,
            width: 200,
            height: 200,
          ),
          Container(
            color: Colors.red,
            width: 150,
            height: 150,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
        ],
      ),
    );
  }
}

Output:

Done☻♥.