Make Positioned Widget responsive

Question

I want to make positioned widgets responsive but cannot find a way. I used media query but nothing is working. I know that there are many answers but I did not see anyone targeting positioned widget. Everyone doing row-column responsive. If you attach a simple example with the position it will be great. Here is my code.

  Positioned(
              top: MediaQuery.of(context).size.width * 0.87,
              left: MediaQuery.of(context).size.width * 0.02,
              // width: MediaQuery.of(context).size.width / 30,
              child: Text(
                'TRACK’R',
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: MediaQuery.of(context).size.width / 30,
                ),
              ),
            ),

Solution

Here is your Positioned widget inside a Stack. Isn't this what you want to achieve?

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(color: Colors.blueGrey.shade300),
          Positioned(
            top: MediaQuery.of(context).size.width * 0.87,
            left: MediaQuery.of(context).size.width * 0.02,
            width: MediaQuery.of(context).size.width / 3,
            child: ColoredBox(
              color: Colors.white.withOpacity(.4),
              child: Text(
                'TRACK’R',
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: MediaQuery.of(context).size.width / 30,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Though, you might want to define your top based on the height of your screen instead of the width. Otherwise, your Text will be out of the screen in landscape mode:

Another way would be to use Align and FractionallySizedBox inside your Stack:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(color: Colors.blueGrey.shade300),
          Align(
            alignment: Alignment(-.9, .9),
            child: FractionallySizedBox(
              widthFactor: .3,
              child: ColoredBox(
                color: Colors.white.withOpacity(.4),
                child: Text(
                  'TRACK’R',
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: MediaQuery.of(context).size.width / 30,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Or, using a LayoutBuilder and then a Positioned widget inside your Stack:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (_, constraints) {
          final width = constraints.biggest.width;
          final height = constraints.biggest.height;
          return Stack(
            children: [
              Container(color: Colors.blueGrey.shade300),
              Positioned(
                bottom: height * .05,
                left: width * .05,
                width: width / 3,
                child: ColoredBox(
                  color: Colors.white.withOpacity(.4),
                  child: Text(
                    'TRACK’R',
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: width / 30,
                    ),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

Comments

[pskink]

check CustomMultiChildLayout - the docs say: "CustomMultiChildLayout is appropriate when there are complex relationships between the size and positioning of multiple widgets. To control the layout of a single child, CustomSingleChildLayout is more appropriate. For simple cases, such as aligning a widget to one or another edge, the Stack widget is more appropriate."

[Shahryar Rafique]

Thanks that help me a lot. Can you tell me more regarding the width which you are defining in Positioned width as well as when you use Fractionally Sized Box widthFactor: .3. Is it necessary?

[Thierry]

It all depends on your requirements. It sets the width of your Text to 30% of the width of the Stack. If you provide more precise requirements, I could help you fine-tune the solution. Currently, for the Align > FractionallySizedBox and the LayoutBuilder solutions, I used 5% from both left and bottom, with a width of 30% of the Stack.