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.

Answer 1

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?