How to position children in stack in flutter?

Question

quick questions.. if i have a stack contains 2 Positioned children widgets , one of them contains CircleAvatar widget and the other is Column widget which contains two InkWell widgets so when I add a position left:10, for example the whole CircleAvatar and Column disappers and i can't figure why the code is like below:

Stack(
                      overflow: Overflow.visible,
                      children: [
                        Positioned(
                          right: 100,
                          child: CircleAvatar(
                            maxRadius: 75,
                            backgroundColor: Colors.white,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  balance.toString(),
                                  style: TextStyle(
                                    fontSize: 23,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black,
                                  ),
                                ),
                                Text(
                                  'EGP',
                                  style: TextStyle(
                                    fontSize: 28,
                                    fontWeight: FontWeight.bold,
                                    color: Color(0xffa80f14),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          // left:10,
                          child: Column(
                            children: [
                              SizedBox(
                                height: 18,
                              ),
                              InkWell(
                                onTap: () {
                                  //Navigator.popAndPushNamed(context, 'Recharge');
                                },
                                child: Container(
                                  width: 170,
                                  height: 50,
                                  decoration: BoxDecoration(
                                    color: Color(0xffa80f14),
                                    borderRadius: BorderRadius.circular(20),
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.white,
                                        offset: Offset(0, 1),
                                        spreadRadius: -2,
                                        blurRadius: 6,
                                      ),
                                    ],
                                  ),
                                  child: Center(
                                    child: Text(
                                      "Recharge",
                                      style: TextStyle(
                                        color: Color(0xFFFFFFFF),
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                        fontStyle: FontStyle.italic,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 15,
                              ),
                              InkWell(
                                onTap: () {
                                  //Navigator.pushNamed(context, 'MyTickets');
                                },
                                child: Container(
                                  width: 170,
                                  height: 50,
                                  decoration: BoxDecoration(
                                    color: Color(0xffa80f14),
                                    borderRadius: BorderRadius.circular(20),
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.white,
                                        offset: Offset(0, 1),
                                        spreadRadius: -2,
                                        blurRadius: 6,
                                      ),
                                    ],
                                  ),
                                  child: Center(
                                    child: Text(
                                      "My Tickets",
                                      style: TextStyle(
                                        color: Color(0xFFFFFFFF),
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                        fontStyle: FontStyle.italic,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),

so if i uncomment left:10, the content of the stack comes away and this error appears

The following assertion was thrown during performLayout(): 'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

Solution

If you want the CircleAvatar to be in front of the Column, you need to put it at the last position in the list passed to Stack.children.

Stack(
  overflow: Overflow.visible,
  children: [
    Positioned(
      left: 10,
      child: Column(
        children: [...],
      ),
    ),
    // --- mind the swapped position of CircleAvatar and Column ---
    Positioned(
      right: 100,
      child: CircleAvatar(...),
    ),
  ],
),

Does this answer your question?