Search code examples
flutterdartstackcard

Remove space in Stack


I want to place Card below the 4 icons, but why there is a big gap between?

    case ConnectionState.active:
                  if (snapshot.hasData) {
                    return SingleChildScrollView(
                        child: Column(children: [
                      Stack(
                        children: [
                          Container(
                            height: 500,
                          ),
                          Positioned(
                              top: 0,
                              left: 0,
                              right: 0,
                              child: Container(height: 50, color: Colors.orange)),
                          Positioned(
                            top: 0,
                            left: 24,
                            right: 24,
                            child: Card(
                              shape: RoundedRectangleBorder(
                                side: BorderSide(color: Colors.white70, width: 1),
                                borderRadius: BorderRadius.circular(30),
                              ),
                              margin: EdgeInsets.all(20.0),
                              child: _showWidget(
                                  snapshot.data!), // this are the 4 icons code
                            ),
                          ),
                        ],
                      ),
                      _showBelowCard(snapshot.data!),  // card below 4 icons
                    ]));
                  } else {
                    return NoItem();
                  }


 Widget _showBelowCard(ABC abc) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text(
            "Place it below 4 icons",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 20),
          Text(
            "Status",
            style: TextStyle(color: Colors.grey),
          ),
        ]);
  }

enter image description here


Solution

  • The reason why it is way down is due to the Container() with the height of 500 on your Stack(). The Stack() widget usually takes the size of the biggest children.

    And if you want to have some space between the Card() and the Stack() just add SizedBox() with your desired height.