glassmorphism rgba flutter code example

Example: flutter glassmorphism

Center(
 child: Padding(
  padding: EdgeInsets.symmetric(horizontal: 20),
   // clipract will make sure your blur remains in the container
   child: ClipRect(
    child: BackdropFilter(
     filter: ImageFilter.blur(
     // set the bure amount you want for x and y
       sigmaX: 3,
       sigmaY: 3,
       ),
		Container(
         padding: EdgeInsets.symmetric(horizontal: 10),
          // set the correct width and height for the container
          width: 300,
          height: 350,
            decoration: BoxDecoration(
            // set the color and the opacity
             color: Colors.white.withOpacity(0.3),
             // add a rounded border
              borderRadius: BorderRadius.circular(10),
              // add an edge to the border
              border: Border.all(
              width: 1.2, 
              color: Colors.white.withOpacity(0.3),
              ),
                ),
                // call the child for the container
                 child: Text('normally a column'),),

Tags:

Dart Example