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)),
            ),
          ),
        ],
      ),
    );


Friday 20 January 2023

Add Border, BorderColor, Align to Container

 

 Container(
              height: 150,
              width: 150,
              margin: EdgeInsets.all(8),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  color: Colors.blue,
                  border: Border.all(width: 5, color: Colors.green)),
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  "Container 1",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
Screenshot: