Flutter UI #32: Fun with the Glass Design in Flutter


Flutter UI #32: Fun with the Glass Design in Flutter

Tutorial and code of Glass Design in Flutter. Copy and paste the below code as per your requirements.

blurrycontainer: ^0.1.0

import 'package:flutter/material.dart';
import 'package:blurrycontainer/blurrycontainer.dart';

main() => runApp(TestApp());

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage('https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/274587689_958985421674580_4373749056136792976_n.jpg?stp=dst-jpg_e35&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=06_VMEO5eU4AX_Ky18n&edm=ALQROFkBAAAA&ccb=7-4&ig_cache_key=Mjc3OTQyNzM4MDkwMjc1ODYxMw%3D%3D.2-ccb7-4&oh=00_AT-FC9Y7BAjB8PJuyf1g01Rt6W_IYJkOe9rb1x1zMVXMRQ&oe=623524E8&_nc_sid=30a2ef'),
            ),
          ),
          child: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.white,
                  height: 150,
                  width: 250,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.black,
                  height: 150,
                  width: 350,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.purple,
                  blur: 2,
                  height: 120,
                  width: 150,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.lightBlueAccent,
                  height: 180,
                  width: 180,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.