How can I set two container on top of each other?

Question

im trying to set 2 containers on top of each other. What I want is to showing a star and when user pressed the star I wanna open 5 star so he can vote . Im not really sure if im thinking the correct way . But fr that I wanna create one container and in another container directly above this stars container displaying all other buttons how's just buttons to clock normally . I hope that you understand what I trying to do. So when im putting the star container also in the same container they buttons when opening all stars the whole container will move isn't? So heres im trying to do.

class VideoPage extends StatelessWidget {
  static const route = '/Video';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                Container(
                  width: 100,
                  color: Colors.orange[300],
                ),
                Container(
                  width: 100,
                  color: Colors.red[300],
                ),
              ],
            ),
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}

This look like that:

And I want that the orange one is directly under the red one so there will be first one star and on pressing it open 5 stars . Is this possible what im trying ? If so please help . If not please help haha

Solution

What you need to use is the Stack Widget:

Stack(
  children: <Widget>[
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ],
),

The last widget of the children is the top layer, structure descending.

more info: https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

EDIT: In your case if you want the orange one underneath, you have to do some changes within your structure and split it from your Row()

---

Example

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Stack(
            children: <Widget>[
              
              Container(
                  width: MediaQuery.of(context).size.width *1,
                  height: 200,
                  color: Colors.orange,
                ),
              
             Container(
               height:200,
               child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                
                Container(
                  width: 100,
                  color: Colors.red.withOpacity(0.5),
                ),
              ],
            )),
              
  ],
          
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}

Comments

[Admin]

The orange should be under the red one . When im putting both inside in stack and removed from row I can't see them anymore

[Marcel Dz]

check my edited answer, I provided you an example showing the orange one underneath. To change it to your fits you will have to play around with the structure, but this is providing you the container underneath the rest.

[Admin]

Still not seeing the orange one . Did you tested before that ?

[Admin]

The orange one should be under the red one but above the blue one

[Marcel Dz]

yes, I even reduced the opacity of the red one so you can see the orange one below. I made the orange one using the whole width. If you want it above the blue one you should also split the blue one from it.

[Admin]

What if I want another container under the red one ?

[Marcel Dz]

If you want it on the same layer as the orange one, wrap both in a row (next to each other) or column (above and below), if you want it separate, just follow my instruction with the direction ordering the widgets. Please check the article link for further informations, anyways please mark the answer as accepted, if it solved your problem regarding to the question