How can I correctly place a red oval in Flutter?

▲
1
▼

Where should the red oval be

Hello, my question is how can I get the red oval in the picture above to the position marked below? Does anyone know? I thank you in advance.

This is my code:

return Scaffold(
  backgroundColor: const Color(0xffffffff),
  body: Stack(
    children: <Widget>[
      Container(
        child: Align(
          alignment: Alignment.bottomCenter,
        ),
        width: 436.0,
        height: 207.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(29.0),
          image: DecorationImage(
            image: const AssetImage('assets/images/vorlage.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        child: Align(
          alignment: Alignment.bottomCenter,
        ),
        width: 265.0,
        height: 20.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(14.0),
          color: const Color(0xffff0000),
        ),
      ),
flutter
position
asked on Stack Overflow Dec 26, 2020 by danielalakin

2 Answers

▲
1
▼

You might need to look into painting a Canvas. It's fairly well developed, and quite a bit of tutorial information on it (even how to animate things!). Everything is a widget, but some of those widgets are RenderObjects. :)

answered on Stack Overflow Dec 26, 2020 by Randal Schwartz
▲
1
▼

If you want to red oval to always be fixed at a position in it's parent widget, you can use Positioned widget to fix the distance from top, then use Center to place it in the middle. You will have to tweak the top value (I put 300 arbitrarily).

return Scaffold(
  backgroundColor: const Color(0xffffffff),
  body: Stack(
    children: <Widget>[
      Container(
        child: Align(
          alignment: Alignment.bottomCenter,
        ),
        width: 436.0,
        height: 207.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(29.0),
          image: DecorationImage(
            image: const AssetImage('assets/images/vorlage.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
      Positioned(
        top: 300 // <----tweak this till it's where you want it (distance from top)
        child: Center(
          child: Container(
            child: Align(
              alignment: Alignment.bottomCenter,
            ),
            width: 265.0,
            height: 20.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(14.0),
              color: const Color(0xffff0000),
            ),
          ),
        ),
      ),
answered on Stack Overflow Dec 27, 2020 by Zayne ZH

User contributions licensed under CC BY-SA 3.0