Create two widgets independent of each other

Question

I am not sure if I am missing something here, but in Flutter I want to crate two widgets that can be moved around independently of each other.

My current code is this:

class SurpriseReveal extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "Hi",
            style: TextStyle(fontSize: 20, color: Colors.pink[700]),
            textAlign: TextAlign.center,
          ),
          InkWell(
            onTap: null,
            splashColor: Colors.pink[900],
            child: Container(
              // set your desired height here
              height: 150,
              // set your desired width here
              width: 150,
              // decoration property gives it a color and makes it round like a floating action button
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.pink[300],
              ),
              // add your desired padding here
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              // add the child element
              child: Center(
                child: Text(
                  'Hi',
                  // style of the text
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 22.0,
                    color: Colors.pink[900],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

This creates something that looks like this:

What I would like to be able to do is choose the positioning of these widgets on the screen independently of each other. For example, If I wanted to have a gap between the text and the button, or the button off to one side.

Would I need to create two separate functions that return Widget?

Answer 1

To add space between your widgets you can wrap them with a Padding() widget. However, if you want to dispose your widgets independantly wherever on the screen wrap them in a stack widget and use Positionned() widget to set their constrainst.