Flutter relative position of elements inside container

Question

I have the following slightly modified standart app, in which the button and the result are put in a container.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: containerWidget()
      ),
    );
  }
}

class containerWidget extends StatefulWidget {
  @override
  _containerWidgetState createState() => _containerWidgetState();
}

class _containerWidgetState extends State<containerWidget> {

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height : 300,
      width  : 300,
      child:
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          FloatingActionButton(
                  onPressed: _incrementCounter,
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                
              ),
        ],
      ),
    );
  }
}

In a first step, I would like to get the width and size of the screen to set the relative position of the container widget within the screen.

In a second step, I would like to modify the position of the Button within the Container widget, that means either

by getting the absolute position of the container to set the absolute position of the button w.r.t the screen size

or

by setting the relative position of the button inside the container

Positioned(left: 30.0,
           top: 50.0,
           child: Container(
                width: 100.0,
                height: 80.0,
                decoration: new BoxDecoration(color: Colors.red),
                child: ...

What exactly are you trying to do? It sounds like you should be able to accomplish this using center widgets and padding, or at least with Flex widgets. — Alex Collette, Jun 19 '20 at 23:51
Yes, but I would like to have complete controll over positioning. — Uwe.Schneider, Jun 20 '20 at 09:34

score 2 · Accepted Answer · edited Aug 04 '20 at 09:01

For the height and width of the screen you can check ou this answer : Flutter screen size

if you'd like to move the button relative to the parent Container, you can wrap the container with a Stack widget, and set the container and button as its children(meaning you have to move the button outside the container), then simply wrap the button with a Positioned widget and use arguments right : , left : , top : , bottom : , to control the button's position with respect to the container

//for example, this means the container is 30px to the left and 50px from the top
Positioned(left: 30.0,
           top: 50.0,
           child: Container()),

Flutter relative position of elements inside container

1 Answers1