Monday 30 January 2023

Stack View widget example

 

Container(
      child: Stack(
        children: [
          // Container with color blue
          Container(
            height: 150,
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.blue,
                border: Border.all(width: 1, color: Colors.grey),
                borderRadius: BorderRadius.all(Radius.circular(8))),
          ),

          Positioned(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
                //set border radius more than 50% of height and width to make circle
              ),
              elevation: 1,
              color: Colors.white,
              child: Container(
                  height: 36, width: 36, child: Icon(Icons.safety_check)),
            ),
          ),

          // top right icon
          Positioned(
            left: MediaQuery.of(context).size.width - 70,
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
                //set border radius more than 50% of height and width to make circle
              ),
              elevation: 1,
              color: Colors.white,
              child: Container(
                  height: 36, width: 36, child: Icon(Icons.camera_alt)),
            ),
          ),

          // Botton Left Icon
          Positioned(
            top: 100,
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
                //set border radius more than 50% of height and width to make circle
              ),
              elevation: 1,
              color: Colors.white,
              child:
                  Container(height: 36, width: 36, child: Icon(Icons.sailing)),
            ),
          ),

          // bottom right icon
          Positioned(
            left: MediaQuery.of(context).size.width - 70,
            top: 100,
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
                //set border radius more than 50% of height and width to make circle
              ),
              elevation: 1,
              color: Colors.white,
              child:
                  Container(height: 36, width: 36, child: Icon(Icons.gamepad)),
            ),
          ),
        ],
      ),
    );


No comments:

Post a Comment